mui上拉刷新下拉加载

最新推荐文章于 2024-05-16 00:19:21 发布

原创最新推荐文章于 2024-05-16 00:19:21 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mui

本文总结了在使用mui进行列表上拉刷新和下拉加载时遇到的问题及解决方案，包括如何调用mui的post方法。分享了一个自封装的工具类，也可直接使用mui内置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mui 上拉刷新下拉加载

在做列表上拉刷新下拉加载的时候遇到了一些问题总结一下供大家参考

这里我用到了一个自己封装的工具类来调mui post方法的大家也可以用mui本身自己去调用

1.html代码

<!--下拉刷新容器-->
		<div id="pullrefresh">
			<!--数据列表-->
			 <div class="gt-bookdetailbox">
			 <div class="gt-bookdetailboxcon gt-bookdetailboxcon2">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"></ul>
			</div>
			</div>
		</div>
		
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>   
<script src="../../js/water/common.js" type="text/javascript" charset="UTF-8"></script>

2.script代码

var commonHelp = new CommonHelp();
mui.init({
				//页面加载时，触发下拉刷新
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh // 下拉刷新
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh //上拉加载
					}
				}
			});
var pageNo = 1;
var pageSize = 5;
//上拉加载
function pullupRefresh() {
	setTimeout(function() {
		commonHelp.SendReq(
			commonHelp.serverAdd() + "your.action", {
				pageNo: pageNo,
				pageSize: pageSize
			},
			function(data) {
				pageNo++;
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					//table.innerHTML = "";
					for(var i = 0; i < data.data.length; i++) {
						var orderdeal = data.data[i];
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-collapse';
						li.innerHTML = '<li class="mui-table-view-cell"><div class="mui-table">'+
						                '<div class="mui-table-cell mui-col-xs-10">'+
						                    '<h5 class="mui-ellipsis">订单编号：' + orderdeal.waterOrderDeliveryNumber + '</h5>'+
							            '</div>'+
							        	'</li>';
						table.appendChild(li);
					}
					mui('#pullrefresh').pullRefresh().endPullup();
			},
			function() {
				mui('#pullrefresh').pullRefresh().endPullup(true);
			}
		);
	}, 1000);
}
//下拉刷新
function pulldownRefresh() {
	setTimeout(function() {
	mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载控件 防止上拉加载后 再下拉刷新时不请求数据
	pageNo = 1;
	pageSize = 5;
	commonHelp.SendReq(
		commonHelp.serverAdd() + "your.action", {
			pageNo: pageNo,
			pageSize: pageSize
		},
		function(data) {
			pageNo++;
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				table.innerHTML = "";
				for(var i = 0; i < data.data.length; i++) {
					var orderdeal = data.data[i];				
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-collapse';
					li.innerHTML = '<li class="mui-table-view-cell"><div class="mui-table">'+
						                '<div class="mui-table-cell mui-col-xs-10">'+
						                    '<h5 class="mui-ellipsis">订单编号：' + orderdeal.waterOrderDeliveryNumber + '</h5>'+						                    
							            '</div>'+
							        	'</li>';
					table.appendChild(li);
					//下拉刷新，新纪录插到最前面；
				}
			
		},
		function() {
			mui.toast("网络异常，请稍后再试！")
		}
	);
		mui('#pullrefresh').pullRefresh().endPulldown();
		this.pu
		mui.toast("刷新完成");
	}, 1000);
}

3.CommonHelp 工具类代码

//发送请求
	this.SendReq = function(url, data, succ, err) {
		mui.ajax(url, {
			data: data,
			dataType: "json",
			type: "post",
			timeout: 10000,
			//headers : {'Content-Type':'application/json'},
			crossDomain: true,
			success: succ,
			error: err
		});
	}

注：在下拉刷新方法里面标明了一行红字这个是之前做遇到的问题如果不加的话上拉刷新加载到没数据后再返回顶部请求上拉加载数据后再次下拉刷新数据不会出来