本文介绍: 原理其实就是检测触底,就把页码+1,然后对数据进行拼接
🤵 作者:coderYYY
🧑 个人简介:前端程序媛,目前主攻web前端,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!)
👉 个人专栏推荐:《前端项目教程以及代码》
✨一、前言
项目开发中,如果请求后端数据过多,我们一般会进行分页处理,而在移动端,我们一般是通过“上拉触底”这个动作加载下一页,如果加载最后一页就进行提示。
🚩二、具体实现
🎉1.前期准备
后端需要一个分页的加载数据接口,由前端传页码、条数
{
PageIndex: 1, //页码
PageSize: 20 //每页大小
}
🎄 2.wxml代码
页面显示分几种情况:数据已部分加载、无数据、加载中、最后一页
<!-- 渲染数据列表,样式自己写,我这里借助了vant宫格组件-->
<view class="list" wx:if="{{dataList.length>0}}">
<van-grid column-num="3">
<van-grid-item use-slot wx:for="{{ dataList}}" wx:key="index">
<view class="flex items-center">
<view class="text-container">{{item.Goods_Name}}</view>
</view>
</van-grid-item>
</van-grid>
</view>
<view wx:else>
<van-empty image="search" description="暂无数据" />
</view>
<!-- 加载提示 -->
<view wx:if="{{loading}}" class="tips">
正在加载...
</view>
<!-- 没有更多数据的提示 -->
<view wx:if="{{!loading&&!hasMoreData}}" class="tips">
- 暂无更多数据 -
</view>
3.js代码
data: {
// 查询参数
PageIndex: 1, //页码
PageSize: 20, //每页大小
loading: false,// 是否加载中
hasMoreData: false,// 是否还有数据
dataList: [],
},
onLoad() {
this.getList()
},
// 请求数据
getList() {
// console.log(e.detail);
wx.showLoading({
title: '加载中',
})
dataGetPage({ // 后端接口,已做了封装,封装方法请看我之前发过的文章
PageIndex: this.data.PageIndex, //页码
PageSize: this.data.PageSize //每页大小
}).then(res => {
if (res.Data) {
// 请求成功,将获取的数据拼接到原来的数据列表中
const newDataList = this.data.dataList.concat(res.Data);
// 更新当前页数和数据列表
this.setData({
PageIndex: this.data.PageIndex + 1,
dataList: newDataList,
});
} else {
this.setData({
hasMoreData: false
})
if (this.data.dataList.length > 0) {
} else {
this.setData({
dataList: [],
})
}
}
this.setData({
loading: false // 加载完成,隐藏加载提示
});
setTimeout(() => {
wx.hideLoading()
}, 500);
})
},
// 触底
onReachBottom: function () {
// 调用加载下一页的方法
this.loadNextPage();
},
// 在页面或组件中定义加载下一页数据的方法
loadNextPage: function () {
// 如果正在加载中,避免重复加载
if (this.data.loading) {
return;
}
// 开始加载,可以显示加载提示,避免用户重复触发加载
this.setData({
loading: true
});
// 2. 发送请求获取下一页数据
this.getList();
},
🔑三、总结
原理其实就是检测触底,就把页码+1,然后对数据进行拼接,以上代码需根据实际应用进行修改。欢迎评论交流
原文地址:https://blog.csdn.net/qq_23073811/article/details/132837469
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_61659.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。