mui是h5十大框架之一。很好用,但是针对不同的场景,文档的描述不够我们理解。
场景:通过mui的上拉加载更多数据,下拉刷新回刚刚进入当前页面的状态。笔者设置每次上拉就清空旧页面的内容,把新加载的10条数据渲染到页面上,当下拉时候,恢复到第一次加载的状态。
问题:当上拉加载的数据达到最多时候,通过
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)
设定不让继续上拉加载。然后当下拉刷新想要回复上拉加载,采用如下:
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
测试发现,没办法恢复上拉加载的功能。
笔者也尝试了用:
mui('#pullup-container').pullRefresh().refresh(true);
mui('#pullup-container').pullRefresh().disablePullupToRefresh();
mui('#pullup-container').pullRefresh().enablePullupToRefresh();
来做测试。但是只有当使用禁用和启动交互时候可以恢复,但是当刷新的时候,会自动执行一次上拉加载动作。所以这些方案都被笔者废弃了。针对上面这些,笔者又尝试如何不让mui再执行刷新动作时候不自动执行一次上拉加载动作,经过研究发现如下调用启用上拉功能的代码,就不会自动执行一次上拉加载的动作:
setTimeout("enablepull",1000);//延时至少1s,小于1s就不行。
function enablepull(){
mui('#pullup-container').pullRefresh().enablePullupToRefresh();
}
上面虽然可以解决,但是笔者还是觉得不好,又尝试了一种曲线救国的方式:
设定全局变量enablepull
每次获取结果之后都判断是否还有更多数据,如果没有更多,那么enablepull=false;
这样每次上拉之前做如下判断:
if (!enablePullUp) {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
mui.toast("没有更多数据了");
return;
}
成功解决问题。
------------------------ 本文来自 独行侠_阿涛 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/wltsysterm/article/details/79270537?utm_source=copy