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

墨蓝 2022-05-12 02:26 401阅读 0赞

**首先得明白一件事情，那就是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()方法，停止显示提示语，配合着方法就可以实现禁用和启用上拉加载了。**

**这里是采用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>

[_MUI]: http://dev.dcloud.net.cn/mui/pullup/