版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/MyFuture_MyDream/article/details/53415460
上拉刷新和下拉加载都是由主容器和子容器组成。子容器在父容器中运动。
在父容器中预加载子容器，然后在子容器中初始化预加载参数。
注意：为了保证IOS和Android平台的一直性，统一采用相同的Dom结构！
父页面~~~
<body>
<div class="mui-content"></div>
</body>
<script type="text/javascript">
/**
* 下拉刷新和上拉加载都由两个webview组成
*/
//启用双击监听
mui.init({
/*开启双击手势*/
gestureConfig: {
doubletap: true
},
/*创建子页面*/
subpages: [{
url: 'pullrefresh_sub.html',
id: 'pullrefresh_sub.html',
styles: {
top: '45px',
bottom: '0px',
}
}]
});
/*contentWebview就是子页面*/
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap', function() {
if(contentWebview == null) {
contentWebview = plus.webview.currentWebview().children()[0];
}
/*将mui语法转换成js进行执行*/
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
</script><body>
<!--为了保证IOS和Android平台的一直性，统一采用相同的Dom结构-->
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentdown: "",
contentrefresh: '诚信 精品 正品',
contentnomore: "",
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
/*每次下拉刷新新增5个元素*/
for(var i = cells.length, len = i + 5; i < len; i++) {
/*创建元素*/
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
//完成刷新
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
/*上拉加载四次后就不能在加载了*/
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 4)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
/*因为每次加载子页面都会先运行pullupRefresh(),所以初始化数量由函数控制*/
for(var i = cells.length, len = i + 15; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
/*在末尾添加元素*/
table.appendChild(li);
}
}, 1500);
}
/*判断plus环境*/
if(mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>