最近在写移动端 使用的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>创建部门: </span>
<span> ${data.communityName}</span>
</span>
<span>
<span>创建时间: </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()
});
}里面最下面是我设置的点击事件 模板套用你需要的就好 就到这 !
