关于MUI中禁用、启用上拉加载的探索

版权声明:爱你们哦~~~ https://blog.csdn.net/CherryLee_1210/article/details/82690699

首先得明白一件事情,那就是MUI提供的禁用和启用的方法是不起作用的。。。

“MUI上拉刷新”
-=-=-=-=-=-=-=-=-=-文档引用start-=-=-=-=-=-=-=-=-=
禁用上拉刷新
在部分场景下希望禁用上拉加载,比如在列表数据过少时,不想显示“上拉显示更多”、“没有更多数据”的提示语,开发者可以通过调用disablePullupToRefresh()方法实现类似需求,代码如下:

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().disablePullupToRefresh();

启用上拉刷新
使用disablePullupToRefresh()方法禁用上拉加载后,可通过enablePullupToRefresh()方法再次启用上拉加载,代码如下:

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().enablePullupToRefresh();

=-=-=-=-=-=-=-=-=-=文档引用 end=-=-=-=-=-=-=-=-=-

-------------------正文开始start------------------

所以我这里采用的是setStopped()方法,停止显示提示语,配合着方法就可以实现禁用和启用上拉加载了。

<script src="../../public/js/mui.min.js"></script>
<script src="../../public/js/vue.min.js"></script>
<!--这两个是必须要引入的,否则上拉加载、下拉刷新不生效-->
<script src="../../public/js/mui.pullToRefresh.js"></script>
<script src="../../public/js/mui.pullToRefresh.material.js"></script>

这里是采用vue,完成数据的双向绑定

new Vue({
    el: "#detail-content",
    data: {
        dom_switch: true,
        userListInfo: {
            total: 0,
            rows: []
        },
        pageSize: 10
    },
    filters: {
        formatTime: function(res) {
            //var quitSecond = `${res}000`;
            if(!res) {
                return "-";
            } else {
                var currentTime = new Date(Number(res));
                var time = {
                    year: currentTime.getFullYear(),
                    month: ("0" + (currentTime.getMonth() + 1)).slice(-2),
                };
                var standardTime = [time.year, time.month].join("-");
                return standardTime;
            }
        }
    },
    methods: {
        muiInit: function() {
            var that = this;
            //初始化mui的方法
            mui.init();

            mui.plusReady(function() {
                //页面区域滚动设置    
                mui('.mui-scroll-wrapper').scroll({
                    scrollY: true,
                    scrollX: false,
                    startX: 0,
                    startY: 0,
                    indicators: true,
                    deceleration: 0.0006,
                    bounce: true
                });

                //页面应用上拉加载
                mui("#detail-content-list").pullToRefresh({
                    up: {
                        callback: function() {
                            var self = this;
                            setTimeout(function() {
                                that.loadData(self);
                            }, 1000);
                        }
                    }
                });

                //页面一加载先停止提示
                mui("#detail-content-list").pullToRefresh().setStopped(true);
                //加载数据
                that.loadData(false);
            });
        },
        loadData: function(self) {
            var win = plus.webview.currentWebview();
            var that = this;
            var wait = plus.nativeUI.showWaiting("");

            win.params['IMEI'] = plus.device.uuid.split(",")[0];
            win.params.pageSize += that.pageSize
            mui.getJSON(API_SERV_URL + '/sheHuiTuanTi/infolist', win.params, function(res) {
                wait.close();
                if(res.data.total) {
                    mui("#detail-content-list").pullToRefresh().setStopped(false);
                    that.userListInfo = res.data;

                    //超过总条数不再继续加载
                    if(self) {
                        self.endPullUpToRefresh(win.params.pageSize >= res.data.total ? true : false);
                    }
                } else {
                    //暂无信息显示
                    that.dom_switch = false;
                    //停止“没有更多数据”的提示
                    mui("#detail-content-list").pullToRefresh().setStopped(true);
                    //停止上拉加载事件
                    mui("#detail-content-list").pullToRefresh().endPullUpToRefresh(true);
                }
            });
        }
    },
    mounted: function() {
        this.$nextTick(function() {
            this.muiInit();
        })
    }
})

保证在没有查询信息的时候,直接展示 “暂无相关社团信息“,没有必要出现“上拉加载展示更多内容“。

<div id="detail-content" class="mui-content mui-scroll-wrapper" v-cloak>
    <div class="mui-scroll" id="detail-content-list">
        <div v-if="dom_switch">
            <div v-if="userListInfo.total">
                <div class="iss-panel service-list s3">
                    <div class="tit">
                        <h3>社团信息</h3>
                    </div>
                </div>
                <form class="mui-input-group login-wrap bdr-btm-0 bdr-top-0 clearfix" v-for="(userInfo,index) in userListInfo.rows" :key="index">
                    <p class="stmc-name">社团名称:{{userInfo.stmc}}</p>
                    <p class="stmc-name">统一社会信用代码:{{userInfo.tyshxydm}}</p>
                    <p class="stmc-name">批准日期:{{userInfo.pzrq | formatTime}}</p>
                    <p class="stmc-name">类型:{{userInfo.lx}}</p>
                    <p class="stmc-name">法定代表人:{{userInfo.fddbr}}</p>
                </form>
            </div>
        </div>
        <div v-else class="pdt-20 text-center f-16 no-more-data">暂无相关社团信息</div>
    </div>
</div>

没有更多推荐了,返回首页