1. 程式人生 > >關於MUI中禁用、啟用上拉載入的探索

關於MUI中禁用、啟用上拉載入的探索

首先得明白一件事情,那就是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>