我爱模板网在用mui做一个矿工管理软件的列表页的时候,上拉加载更多"pullupRefresh",只在第一次加载,再上拉就没反应了,调试的时候发现第一次执行,后面就不执行了:
代码如下:
<div id="pullrefresh" class="mui-content list-wrap" style="margin-top:60px;">
<div class="index-list">
<ul class="miners-list-con" id="list"></ul>
<script id="listTmp" type="text/x-dot-template">
{{ for(var i in it){ }}
<li>
<a class="radio" data-id="{{=it[i].id}}" data-status="{{=it[i].miner_status}}" data-minername="{{=it[i].miner_host}}"></a>
<dl>
<dt
ip="{{=it[i].miner_ip}}"
data-id="{{=it[i].id}}"
data-last="{{=it[i].miner_last}}"
data-status="{{=it[i].miner_status}}"
data-speed="{{=it[i].miner_speed}}"
data-gpunum="{{=it[i].miner_gpu}}"
data-tashname="{{=it[i].task_name}}"
{{? it[i].miner_status == 1}} class="green" {{??}} class="red" {{?}}>
<b>{{=it[i].miner_host}}
{{? it[i].miner_status == 0}}
<i style="color:red">离线 {{=func.removeYear(it[i].miner_last)}} ({{=howLong(it[i].miner_last)}})</i>
{{?}}
</b><i class="mui-icon mui-icon-arrowright"></i>
</dt>
<div>
<!--<dd class="d1"><span>方 案:</span>
{{=it[i].task_name}}
</dd>-->
<dd class="d2"><span>总速度:</span>{{=parseInt(it[i].miner_speed)}}M</dd>
<dd class="d3"><span>显卡数:</span>{{=it[i].miner_gpu}}</dd>
</div>
</dl>
</li>
{{ } }}
</script>
</section>
</div>
</div>
js代码如下:
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style:'circle',
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
function pulldownRefresh() {
plus.webview.currentWebview().reload(true);
}
function pullupRefresh() {
page ++;
getList(token,search_status,search_keyword,order,seq,search_sort,search_warn,page);
}
function getList(token){
func.showWaiting();
mui.get(hostName+"?m=miner&a=list",{
t : token
},function(r){
func.closeWaiting();
if(r.code == 200){
var box = doT.template(document.querySelector("#listTmp").innerText);
if(page == 1){
if(r.data.length == 0){
document.querySelector("#list").innerHTML = "<p style='padding:10px;'>没有任何数据!</p>";
}else{
document.querySelector("#list").innerHTML = box(r.data);
}
}else{
//加载更多
if(r.data.length < 10){
mui.toast('没有更多数据了!');
document.querySelector("#list").innerHTML += box(r.data);
}else{
document.querySelector("#list").innerHTML += box(r.data);
}
}
}else{
mui.toast(r.msg);
}
},"json")
}
仔细查找了代码,发现没有加下面的代码:
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true|false);
注意:
有数据需要调用,没数据也需要调用;唯一区别是,还有数据,传入false,没有数据了,需要传入true
修改后的js代码:
function pullupRefresh() {
page ++;
//注意这里传入false
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
getList(token,search_status,search_keyword,order,seq,search_sort,search_warn,page);
}
function getList(token){
func.showWaiting();
mui.get(hostName+"?m=miner&a=list",{
t : token
},function(r){
func.closeWaiting();
if(r.code == 200){
var box = doT.template(document.querySelector("#listTmp").innerText);
if(page == 1){
if(r.data.length == 0){
document.querySelector("#list").innerHTML = "<p style='padding:10px;'>没有任何数据!</p>";
}else{
document.querySelector("#list").innerHTML = box(r.data);
}
}else{
//加载更多
if(r.data.length < 10){
//注意这里,传入true
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
mui.toast('没有更多数据了!');
document.querySelector("#list").innerHTML += box(r.data);
}else{
document.querySelector("#list").innerHTML += box(r.data);
}
}
}else{
mui.toast(r.msg);
}
},"json")
}