Mui实现下拉刷新 上拉加载数据(搭配JQuery)

最近在写移动端 使用的Mui框架 刚接手的时候 我看教程的时候跳转传参看了我快一下午都没能实现 也不知道是我原生代码是跟他冲突还是干嘛了 有这方面大佬请记得踹我两脚 给我解答一下

今天实现的上拉刷新 和下拉加载数据

1

2

 直接上代码了

	<div class="container">
		<div class="containerSoEasy mui-content mui-scroll-wrapper" id="pullrefresh">
			<div class="mui-scroll">
                //搜索框 没有可不写 主要是上面第二个和第三个div
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label><span class="mui-icon mui-icon-search"></span></label>
						<input type="text" class=".mui-input-search" placeholder="搜索项目">
					</div>
				</form>
				<div class="dataList">
                    //你数据模板渲染的地方
			    </div>
			</div>
		</div>
	</div>复制

1.(前提是你需要有一个分页获取数据的接口)先初始化下拉刷新 并且 定义当前页和每页展示多少条

 getPageList是获取数据的方法  解释一下: 下拉时 当前页定义为1 调用获取数据的方法 当前页为1 他就会给你返回当前第一页的内容  上滑时 当前页加1 会重新加载下一页的内容

// // 初始化下拉刷新
// 初始化分页参数
var dataList = []; // 存储所有数据的数组
// 当前页
pageNum = 1
// 每页展示多少条
pageSize = 5
mui.init({
	pullRefresh: {
		container: '#pullrefresh',
		down: {
			style: 'circle', // 设置下拉刷新样式
			callback: function () {
				// 下拉刷新回调函数，重新获取第一页数据
				pageNum = 1;
//获取数据的方法
				getPageList();
			}
		},
		up: {
			style: 'circle', // 设置上拉刷新样式
			contentrefresh: '正在加载...', // 上拉加载时显示的文本内容
			callback: function () {
				// 上拉加载回调函数，加载下一页数据
				pageNum++;
				getPageList();
			}
		}
	}
});复制

2.getPageList( )  正常获取数据的方法  我用一个数组将加载的数据累加进去了 并当实际参数传入一个新的方法用于渲染到页面上   上面也说 上滑会从新加载数据 不累加进去的话 你那单独的数据渲染 他只会渲染上一页或下一页或当前页的内容 他不会连在一起   

3.我还在获取数据成功的时候做了判断 用于结束上滑和下拉动作 和没有更多数据的时候展示 // 非第一页数据为空时，提示没有更多数据通常情况下，当传入 true 参数时，MUI 框架会显示一个提示，告诉用户当前已经是最后一页或没有更多数据可加载。
  mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  //传入true 没有更多数据时他会提示没有更多数据了

// 分页获取规划项目列表  getPagePlanProjectList
function getPageList() {
	$.ajax({
		type: "get",
		url: getPagePlanProjectList,
		async: false,
		headers: {
			'Content-Type': 'application/json',
		},
		data: {
			"pageNum": pageNum, //
			"pageSize": pageSize, //
		},
 
		success: function (res) {
			console.log(res);
			if (res.code == 200 && res.data.data.length > 0) {
				var newData = res.data.data; // 获取到的新数据
 
 
				// 将新数据追加到数组中
				dataList = dataList.concat(newData);
				// 处理获取到的数据
				renderData(dataList);
 
 
				if (pageNum === 1) {
					// 用于结束下拉刷新动作
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				} else {
					// 用于结束上拉刷新动作
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				}
			} else {
				// 处理数据为空的情况
				if (pageNum === 1) {
					// 第一页数据为空时，清空数组和数据列表
					dataList = [];
					renderData(dataList);
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				} else {
					// 非第一页数据为空时，提示没有更多数据通常情况下，当传入 true 参数时，MUI 框架会显示一个提示，告诉用户当前已经是最后一页或没有更多数据可加载。
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
				}
			}
 
 
		},
		error: function (e) {
			// 处理请求失败的情况
			console.error(error);
 
			// 结束下拉刷新或上拉加载，并提示出错信息
			if (pageNum === 1) {
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			} else {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
			}
		}
	});
}复制

4.renderData() 用来处理共获取到的数据 并渲染到页面上

 
// 渲染数据列表
function renderData(dataList) {
	var pullUp_data = document.querySelector('.dataList')
	var str = ''
	// 遍历dataList数组
	dataList.forEach(function (data) {
		var beginTime = new moment(data.beginTime).format("yyyy-MM-DD");
		var completeTime = new moment(data.completeTime).format("yyyy-MM-DD");
		var createTime = new moment(data.createTime).format("yyyy-MM-DD HH:mm");
		// 设置HTML模板
		str += `
					<div class="data_list" data-id="${data.id}">
						<div class="data_list_left">
							<div class="data_list_top">
								<span>
									<img src="../assets/image/icon/Group 6867.png" alt="">
								</span>
								<div class="data_list_font">${data.name}</div>
								<button type="button" class="mui-btn mui-btn-success" id="AAA" 
								 data-id="${data.id}">建议</button>
							</div>
							<div class="data_list_center" data-id="${data.id}">
								<div class="moTai" data-id="${data.id}">
									<p data-id="${data.id}">
										<span class="firstSpan">总工期:</span>
										<span class="lastSpan">[${beginTime} 至 ${completeTime}]</span>
									</p>
									<p data-id="${data.id}">
										<span class="firstSpan">项目状态:</span>
										<span class="lastSpan">${data.status}</span>
									</p>
									<p data-id="${data.id}">
										<span class="firstSpan">项目进度:</span>
										<span class="mui-progressbar mui-progressbar-in lastSpan demo1">
											<span></span>
										</span>
										<span class="percentage">${data.process}</span>
									</p>
								</div>
							</div>
							<div class="data_list_end">
								<span>
									<span>创建部门:&emsp;</span>
									<span> ${data.communityName}</span>
								</span>
								<span>
									<span>创建时间:&emsp;</span>
									<span>${createTime}</span>
								</span>
							</div>
						</div>
					</div>
						`;
 
	});
	// 将数据项添加到父级容器中
	pullUp_data.innerHTML = str;
 
	// 事件委托，为数据列表的外层容器添加点击事件监听器
	mui('#pullrefresh').on('tap', '.data_list', function (event) {
		console.log(event.target);
		console.log(event.currentTarget);
		var id = event.target.getAttribute('data-id');
		console.log(id);
		jumpBasisFn(id); // 调用跳转方法
	});
	// 事件委托，为数据列表的外层容器添加点击事件监听器
	mui('#pullrefresh').on('tap', '#AAA', function (event) {
		var id = event.target.getAttribute('data-id');
		jumpFn(id); // 调用跳转方法
		event.stopPropagation()
	});
}复制

里面最下面是我设置的点击事件 模板套用你需要的就好 就到这 !