本文介绍: 原理其实就是检测触底,就把页码+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进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注