当前位置：首页 > news >正文

微信小程序分页加载功能，结合后端实现上拉底部加载下一页数据，数据加载中和暂无数据提示

news 2025/7/8 12:09:35

🤵 作者：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();},