关于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>