mui上拉刷新和下拉加载

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

mui上拉刷新和下拉加载

猜你喜欢