zapoi
zapoi
  • 发布:2016-09-13 15:50
  • 更新:2016-09-18 10:02
  • 阅读:3549

选项卡+下拉刷新上拉加载出现每个选项卡内部的scroll不能滑动

分类:MUI

添加了下拉刷新和上拉加载后就无法实现滚区域的滚动了。修改了overflow无效,添加了固定区域也无效。上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城管动态</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">

    <script src="../js/mui.min.js"></script>  
        <script type="text/javascript" src="../js/common.js" ></script>  
        <script type="text/javascript" src="../js/util.js" ></script>  
        <script type="text/javascript" src="../js/bdcc.js" ></script>  
        <script src="../js/mui.pullToRefresh.js"></script>  
         <script src="../js/mui.pullToRefresh.material.js"></script>  

         <script type="text/javascript" charset="utf-8">  

                        var start=1;  
                        var limit=10;;  
                        var totalProperty=0;  
                        var IdArray =[];//创建一个用来存放id的数组。  

                        var MessageFileds =[  
                                            'id',  
                                            'title',  
                                            'time',  
                                            'ImageUrl',  
                                            'DateType',  
                                            'RedareaType'  
                                            ]  
                        mui.init({  
                        });  
                          (function($) {  
                                    //阻尼系数  
                                    //var deceleration = mui.os.ios?0.003:0.0009;  
                                    $('.mui-scroll-wrapper').scroll({  
                                        bounce: false,  
                                        indicators: true, //是否显示滚动条  
                                    //  deceleration:deceleration  
                                    });  
                           $.ready(function() {  
                                   //循环初始化所有下拉刷新。上啦加载  
                              $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'),function(index,pullRefreshEl){  
                                 $(pullRefreshEl).pullToRefresh({  
                                    down: {  
                                      callback: function() {  
                                         var self = this;  
                                         setTimeout(function() {  
                                           var id =IdArray[index].id;  
                                           var typeName =IdArray[index].typeName;  
                                              screen(id,typeName,index);//向服务器请求交互  
                                             self.endPullDownToRefresh();  
                                                    }, 1000);  
                                             }  
                                             },  
                                        up: {  
                                          callback: function() {  
                                           var self = this;  
                                           setTimeout(function() {  
                                                      var id =IdArray[index].id;  
                                                      var typeName =IdArray[index].typeName;  
                                                       //screen(id,typeName,index);  
                                                      self.endPullUpToRefresh();  
                                           }, 1000);  
                                       }  
                                    }  
                                      });  
                                     });  
                                   });  

                                 })(mui);  

                           mui.plusReady(function() {  
                                    var infoTypeName_Index =plus.storage.getItem("infoTypeName_Index")  
                                    document.body.querySelector('#infoTypeName').innerHTML=infoTypeName_Index;  
                                               initType();  
                                               });  

                    function initType ()  
                    {  

                        var id =plus.storage.getItem("infoTypeId_Index");  
                        var url = serverUrl + "InfoType/getInfoTypeTreeByid.do?";  
                        mui.ajax(url,{  
                                 data:{  
                                 id:id  
                                 },  
                                 dayaType:'json',  
                                 type:'post',  
                                 timeout:timeout,  
                                 success:function(data)  
                                 {  
                                 if(data.success)  
                                 {  
                                 var table = document.body.querySelector('#typeList');  
                                 var items = data.data[0].children;  
                                 if(items==null)  
                                 {  
                                 mui.toast("没有符合条件的数据!");  
                                 return ;  
                                 }  

                                 var index = 1;  
                                 for(var i = 0;i < items.length;i ++)  
                                 {  
                                 var item = items[i];  
                                 var id = item.id;  
                                 var typeName = item.typeName;  
                                 var children = item.children;  
                                 var tplj=item.tplj;  

                                 if(children==null)  
                                 {  
                                 IdArray.push(item);//添加对象进入数组  
                                 document.getElementById("title" + index).innerHTML = typeName;  
                                 getInfo(id,index,typeName);  
                                 index ++;  
                                 }  
                                 else  
                                 {  
                                 for(var j = 0;j < children.length;j ++)  
                                 {  
                                 var id_ = children[j].id;  
                                 var typeName_ = children[j].typeName;  
                                 var children_ = children[j].children;  
                                 var tplj_ = children[j].tplj;  
                                 IdArray.push(children);//添加对象进入数组  
                                 document.getElementById("title" + index).innerHTML = typeName;  
                                 getInfo(id_,index,typeName);  
                                 index ++;  
                                 }  
                                 }  
                                 }  

                                 if(index < 10)  
                                 {  
                                 for(var t = index; t <= 10; t ++)  
                                 {  
                                 removeObject("title" + t);  
                                 removeObject("itemmobile" + t);  
                                 }  
                                 }  
                                 }  
                                 else  
                                 {  
                                 mui.toast(data.error);  
                                 }  
                                 },  
                                 error:function(xhr,type,errorThrown)  
                                 {  
                                 mui.toast("请求失败" + errorThrown);  
                                 }  
                                 });  
                    }  
                 //筛选本地数据库中有的数据取出,id,上传给服务器  
                function screen(id,typeName,index){  
                    var pastTime =GetDateStr(-3)+"";  
                    var id = id +"";  
                    var idStr ="";//要传给服务器的id串  
                    //根据时间查找本地数据库里有的数据。  
                    select("MessageForm","*","DateType=? and time >?",[id,pastTime],"id",function (result){  
                           if(result){  
                           for(var i=0;i<result.length;i++){  
                           //alert(JSON.stringify(result.item(i)))  
                           if (result.item(i).id ==null){  
                           var tempId = 0;  
                              result.item(i).id ="0";  
                            idStr += tempId +",";  
                           }else{  
                             idStr += result.item(i).id +",";  
                           }  

                           }  

                           //alert(idStr);  
                           openInfo(id,typeName,index,idStr);//和服务器进行交互  
                           }else{  
                           idStr =0+",";  
                           idStr = idStr +"";  
                           openInfo(id,typeName,index,idStr);//和服务器进行交互  
                           }  
                           });  
                   }  

                   //和服务器交互  
                    function openInfo(id,typeName,index,idStr)  
                    {  
                        var url = serverUrl + "jgb/getSJGL_INFOListWithPic_add.do?";  
                       // alert(id+','+idStr+','+limit+','+index)  
                        mui.ajax(url,{  
                                 data:{  
                                 InfoTypeId:id,  
                                 IdStr:idStr, // 请求的参数。  
                                 Limit:limit,  
                                 },  
                                 type:'post',  
                                 dataType:'json',  
                                 timeout:timeout,  
                                 success:function(data){  
                                 if(data.success)  
                                 {  
                                 if(data.totalProperty > 0)  
                                 {  
                                 //totalProperty = data.totalProperty;  
                                 addData(data,index,typeName,id);  
                                 }  
                                 else  
                                 {  
                                   mui.toast("没有新的数据了!");  
                                 }  
                                 }  
                                 else  
                                 {  
                                 mui.toast(data.error);  
                                 }  
                                 },  
                                 error:function(xhr,type,errorthorwn){  
                                 mui.toast("请求失败");  
                                 }  
                                 });  
                    }  

                    function addData(data,index,typeName,id)  
                    {  
                         index= index + 1;  
                        var table = document.body.querySelector('.content' + index);  
                        mui.each(data.data,function(i,item){  
                                 var li = document.createElement('li');  
                                 li.className = 'mui-table-view-cell mui-media';  
                                 li.data=item.id;  
                                 li.addEventListener('tap',function(){  
                                                     var obj = clickedOpenW('info_detail.html',true,false,{'id':''+this.data+''});  
                                                     plus.storage.setItem('info_id',obj.id);  
                                                     plus.storage.setItem("infoTypeName_Detail",typeName);  
                                                     },false);  
                                 var pic=item.bttp  
                                 if(pic==null||pic==""){  
                                 pic="../images/common_default.png";  
                                 }  
                                 alert(JSON.stringify(item))  
                                 var MessageParams =[  
                                                     item.id,  
                                                     item.bt,  
                                                     item.fbrq,  
                                                     pic,  
                                                     id,  
                                                     '1'  
                                                     ]  
                                 insertTable('MessageForm',MessageFileds,MessageParams);//插入数据  
                                 var content = '<a>';  
                                 content += '<img class="mui-media-object mui-pull-left" src="'+pic+'">';  
                                 content += '<div class="mui-media-body">';  
                                 content += '<p class="mui-ellipsis-2 p_font">'+item.bt+'</p>'  
                                 content += '<p class="mui-ellipsis-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+item.zy+'</p>'  
                                 content += '<p style="text-align: right;" class="mui-ellipsis">' + item.fbrq + '</p>'  
                                 content += '</div>';  
                                 content += '</a>';  
                                 li.innerHTML = content;  
                                 table.appendChild(li);  
                                 });  

                    }  

                     //判断当前时间前后n天的算法  
                     function GetDateStr(daycount){  
                         var date =new Date();  
                         date.setDate(date.getDate()+daycount);//获取当前天前后daycount天的时间  
                         var y = date.getFullYear();  
                         var m =(date.getMonth()+1)<10?"0"+(date.getMonth()+1):(date.getMonth()+1);//获取当前月份,不足10补0  
                         var d = date.getDate()<10?"0"+(date.getDate()):date.getDate();//获取当前几号,不足10补0  
                         return y+"-"+m+"-"+d;  
                     }  

                    /*  
                     * 从本地数据库中读取数据。  
                     */  
                    function getInfo(id,index,typeName){  
                        var astring = id + "";//将id转为string类型  
                        select("MessageForm","*","DateType=?",[id],"time",function (result){  
                               if(result){  
                               //for(var i=0;i<result.length;i++){  
                               //alert(JSON.stringify(result.item(i)))  
                               //}  

                               getDate(index,typeName,result);  
                               }else{  
                               //alert('no more data');  
                               }  
                               });  
                    }  

                    function getDate(index,typeName,result){  
                        var table = document.body.querySelector('.content' + index);  
                        //倒序输出  
                        for(var i=result.length-1;i>=0;i--){  
                        //alert(JSON.stringify(result.item(i)));  
                            var li = document.createElement('li');  
                            li.className = 'mui-table-view-cell mui-media';  
                            li.data=result.item(i).id;  
                            li.addEventListener('tap',function(){  

                                                updateTable("MessageForm",['RedareaType'],['1'],'id =?',[this.data]);  
                                                var obj = clickedOpenW('info_detail.html',true,false,{'id':''+this.data+''});  
                                                plus.storage.setItem('info_id',obj.id);  
                                                plus.storage.setItem("infoTypeName_Detail",typeName);  
                                                document.getElementById(this.data).style.display = 'none';  
                                                //更新数据库中角标的类型。  

                                                },false);  
                                                var pic=result.item(i).ImageUrl;  
                                                if(pic==null||pic==""){  
                                                    pic="../images/common_default.png";  
                                                }  
                                                var  title= result.item(i).title;  
                                                var  time  =result.item(i).time;  

                                                var content = '<a>';  
                                                content += '<img class="mui-media-object mui-pull-left" src="'+pic+'">';  
                                                content += '<div class="mui-media-body">';  
                                                content += '<p class="mui-ellipsis-2 p_font">'+title+'</p>'  
                                                content += '<p class="mui-ellipsis-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>'  
                                                content += '<p style="text-align: right;" class="mui-ellipsis">' + time + '</p>'  

                                                content += '</div>';  
                                                if(result.item(i).RedareaType == '0'){  
                                                    content +='<span id="'+li.data+'" class="mui-badge mui-badge-danger" style="width:14px;height:14px;top:12px;left: 12px;position: absolute;"> </span>'  
                                                }  
                                                content += '</a>';  
                                                // alert(content)  
                                                li.innerHTML = content;  
                                                table.appendChild(li);  
                        }  
                    }  

                        </script>  

                    <style>  
                        html,  
                        body {  
                            background-color: #efeff4;  
                        }  
                    .mui-bar~.mui-content .mui-fullscreen {  
                        top: 44px;  
                        height: auto;  
                    }  
                    .mui-pull-top-tips {  
                        position: absolute;  
                        top: -20px;  
                        left: 50%;  
                        margin-left: -25px;  
                        width: 40px;  
                        height: 40px;  
                        border-radius: 100%;  
                    }  
                    .mui-bar~.mui-pull-top-tips {  
                        top: 24px;  
                    }  
                    .mui-pull-top-wrapper {  
                        width: 42px;  
                        height: 42px;  
                        display: block;  
                        text-align: center;  
                        background-color: #efeff4;  
                        border: 1px solid #ddd;  
                        border-radius: 25px;  
                        background-clip: padding-box;  
                        box-shadow: 0 4px 10px #bbb;  
                        overflow: hidden;  
                    }  
                    .mui-pull-top-tips.mui-transitioning {  
                        -webkit-transition-duration: 200ms;  
                        transition-duration: 200ms;  
                    }  
                    .mui-pull-top-tips .mui-pull-loading {  
                        margin: 0;  
                    }  
                    .mui-pull-top-wrapper .mui-icon,  
                    .mui-pull-top-wrapper .mui-spinner {  
                        margin-top: 7px;  
                    }  

                    .mui-pull-bottom-tips {  
                        text-align: center;  
                        background-color: #efeff4;  
                        font-size: 15px;  
                        line-height: 40px;  
                        color: #777;  
                    }  
                    .mui-pull-top-canvas {  
                        overflow: hidden;  
                        background-color: #fafafa;  
                        border-radius: 40px;  
                        box-shadow: 0 4px 10px #bbb;  
                        width: 40px;  
                        height: 40px;  
                        margin: 0 auto;  
                    }  
                    .mui-pull-top-canvas canvas {  
                        width: 40px;  
                    }  
                    .mui-slider-indicator.mui-segmented-control {  
                        background-color: #efeff4;  
                    }  
                    .header{ text-align:center; color: #fff; background-color: #007aff;  font-size: 1.5rem;   line-height: 2.5rem;}   
                    .mui-table-view .mui-media-object {line-height: 70px; max-width: 70px; height: 70px;}  
                    .fright{ float:right;}  

                    .p_font {  
                        font-size: 17px;  
                        color: black;  
                        line-height: 21px;  
                    }  

                    .mui-scroll-wrapper {  
                        position: absolute;  
                        z-index: 1;  
                        top: 0;  
                        bottom: 0;  
                        left: 0;  
                        overflow: true;  
                        width: 100%;  
                        -webkit-backface-visibility: hidden;  
                    }  

                        </style>  
                    </head>  

<body>  
    <header class="mui-bar mui-bar-nav" style="background-color: deepskyblue;">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"  style="color: white;"></a>  
        <h1 id="infoTypeName" class="mui-title"  style="color: white;"></h1>  
    </header>  
    <div class="mui-content">  
        <div id="slider" class="mui-slider mui-fullscreen">  
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                <div class="mui-scroll">  
                    <a class="mui-control-item mui-active" id="title1" href="#itemmobile1"></a>  
                    <a class="mui-control-item" id="title2" href="#itemmobile2">科技1</a>  
                    <a class="mui-control-item" id="title3" href="#itemmobile3"></a>  
                    <a class="mui-control-item" id="title4" href="#itemmobile4"></a>  
                    <a class="mui-control-item" id="title5" href="#itemmobile5"></a>  
                    <a class="mui-control-item" id="title6" href="#itemmobile6"></a>  
                    <a class="mui-control-item" id="title7" href="#itemmobile7"></a>  
                    <a class="mui-control-item" id="title8" href="#itemmobile8"></a>  
                    <a class="mui-control-item" id="title9" href="#itemmobile9"></a>  
                    <a class="mui-control-item" id="title10" href="#itemmobile10"></a>  
                </div>  
            </div>  
            <div class="mui-slider-group" id="contentDiv">  
                <div id="itemmobile1" class="mui-slider-item mui-control-content mui-active">  
                    <div id="scroll1" class="  mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content1 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile2" class="mui-slider-item mui-control-content" >  
                    <div id="scroll2" class=" mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content2 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile3" class="mui-slider-item mui-control-content">  
                    <div id="scroll3" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content3 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile4" class="mui-slider-item mui-control-content">  
                    <div id="scroll4" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content4 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile5" class="mui-slider-item mui-control-content">  
                    <div id="scroll5" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content5 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile6" class="mui-slider-item mui-control-content">  
                    <div id="scroll6" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content6 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile7" class="mui-slider-item mui-control-content">  
                    <div id="scroll7" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content7 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile8" class="mui-slider-item mui-control-content">  
                    <div id="scroll8" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content8 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile9" class="mui-slider-item mui-control-content">  
                    <div id="scroll9" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content9 mui-table-view " >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="itemmobile10" class="mui-slider-item mui-control-content">  
                    <div id="scroll10" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="content10 mui-table-view" >  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</body>  
2016-09-13 15:50 负责人:无 分享
已邀请:
zapoi

zapoi (作者)

问题已经解决。是由于项目中使用的mui.pullToRefresh.js和mui.pullToRefresh.material.js版本太旧。是在官网修复这个问题前的版本所以会导致这个问题。把这两个js用最新的官网的js更新下就好了。

该问题目前已经被锁定, 无法添加新回复