添加了下拉刷新和上拉加载后就无法实现滚区域的滚动了。修改了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"> '+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"> </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> 
1 个回复
zapoi (作者)
问题已经解决。是由于项目中使用的mui.pullToRefresh.js和mui.pullToRefresh.material.js版本太旧。是在官网修复这个问题前的版本所以会导致这个问题。把这两个js用最新的官网的js更新下就好了。