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

🤵 作者：coderYYY

🧑 个人简介 ：前端程序媛，目前主攻web前端 ，后端辅助，其他技术知识也会偶尔分享🍀欢迎和我一起交流！🚀（评论和私信一般会回！！）

👉 个人专栏推荐 ：《前端项目教程以及代码》

✨一、前言

项目开发中，如果请求后端数据过多，我们一般会进行分页处理，而在移动端，我们一般是通过"上拉触底"这个动作加载下一页，如果加载最后一页就进行提示。

🚩二、具体实现

🎉1.前期准备

后端需要一个分页的加载数据接口，由前端传页码、条数

javascript 复制代码

 {
	 PageIndex: 1, //页码
     PageSize: 20 //每页大小
 }

🎄 2.wxml代码

页面显示分几种情况：数据已部分加载、无数据、加载中、最后一页

html 复制代码

  <!-- 渲染数据列表，样式自己写，我这里借助了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代码

javascript 复制代码

  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，然后对数据进行拼接，以上代码需根据实际应用进行修改。欢迎评论交流