我的页面有图片轮播和logo部分组成,下面是上拉加载的列表,但是,使用mui进行上啦刷新时只是列表的一部分会动,图片和logo都不动。
简要代码如下:
<div id="slider" class="mui-slider mui-content">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="" name="loop"></a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active mui-pull-left"></div>
<div class="mui-indicator mui-pull-left"></div>
<div class="mui-indicator mui-pull-left"></div>
<div class="mui-indicator mui-pull-left"></div>
<div class="mui-indicator mui-pull-left"></div>
</div>
</div>
<div class="search_box" id="search-box">
<a class="search-box-img" href="javascript:;">
</a>
</div>
<!--
作者:offline
时间:2016-12-20
描述:logo
-->
<div class="mui-content-padded" style="margin-top: 0;margin-bottom: 0;position: absolute;z-index: 2;padding: 0;">
<div class="logo">
<div class="logo-img">
</div>
</div>
<div class="hello">
<p >Hello,欢迎来到校园</p>
</div>
</div>
<!--
作者:offline
时间:2016-12-20
描述:actives
-->
<content >
<div class="mui-content" style="padding: 0;margin-bottom: 53.14px;" id="content">
</div>
</content>
<script src="js/mui.min.js"></script>
<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'index1.html',
id:'index1.html',
styles:{
top: '-20px',
bottom: '0px',
}
}]
});
var contentWebview = null;
document.querySelector('#main').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#main').pullRefresh().scrollTo(0,0,0)");
});
</script>
index1.html的代码:
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron actives" id="actives">
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var _imgURL = "http://。。。";
var url = "http://。。。" + pagesize + "/pagenum/" + pagenum;
var active_img=$(".active-img");
var place = $('.school');
var time=$('.time');
var img1_url=[];
var address_all=[];
var actives_time=[];
var li_id=[];
var pagenum = 0;//页数
var pagesize = 5;//每页条数
mui.post(url,{pagesize:'pagesize',pagenum:'pagenum'},function(data){
var alljson_actives=JSON.stringify;
for(var i=0;i<data.length;i++){
//active - img - url
var img1=alljson_actives(data[i].img1);
img1=img1.replace(new RegExp(/(")/g),"");
img1_url[i]=_imgURL + img1;
// actives - address
var address=alljson_actives(data[i].address);
address=address.replace(new RegExp(/(")/g),"");
address_all[i] = address;
//actives - time
var start_time=alljson_actives(data[i].start_time);
start_time=start_time.replace(new RegExp(/(")/g),"");
actives_time[i]=start_time;
//取ID
var jsonid = alljson_actives(data[i].id);
li_id[i] =jsonid.replace(new RegExp(/(")/g),"");
}
mui.init({
pullRefresh: {
container: '#pullrefresh',
/down: {
callback: pulldownRefresh
},/
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
var lastnum = document.getElementsByTagName('li');
pagenum++;
pagesize++;
//alert(pagenum++)
for (var i = cells.length, len = i + 5; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<img class="active-img" src=" '+
img1_url[i]+
'"></img>'+
'<div class="active-palce">'+
'<span class="place-a">'+
'街舞 | 街舞大赛'+
'</span>'+
'<span class="palce-b">'+
'<span class="school">'+
address_all[i]+
li_id[i]+
'</span>'+
'<span class="time">'+
actives_time[i] +
'</span>'+
'</span>'+
'</div>';
table.appendChild(li);
}
}, 500);
//alert(pagenum)
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 500);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
},'json');
</script>
1 个回复
2***@qq.com - xxxxx
把刷新容器的id 设置到body