關於MUI中禁用、啟用上拉載入的探索
阿新 • • 發佈:2018-12-09
首先得明白一件事情,那就是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>