微信小程序开发--上拉加载更多(分页加载)

2021年11月12日 09:58 · 阅读 316

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

1、背景

在移动端开发时，经常会遇到展示列表数据的情况，当列表数据过多的时候会通过分页进行展示。

每页加载一定的数据，当翻到页面底部的时候，在加载第二页数据。

2、实现

根据上面的描述可以看到我们在这个地方有两个事情需要处理：第一：要知道当前页面已经滚动到底部；第二：加载下一页的数据；

既然知道了需要处理的两件事情，那我们一件一件的来解决。

2.1 监听页面滚动到底部

那怎样监听页面是否已经滚动到底部了?

微信小程序中提供了页面事件处理函数 onReachBottom()

下面介绍下该函数：

onReachBottom()

作用：监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。

示例代码如下：

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        wx.showToast({
            icon:"none",
          title: '下拉触底',
        })
    },

复制代码

代码很简单，只是在回调到下拉触底函数后，弹一个toast提示。

效果图如下所示：

触底弹框.gif

到这里我们第一步的问题已经解决了。

2.2 加载下一页数据

当我们监听到页面滚动到底部的时候，需要去请求接口，获取下一页的数据。

示例代码如下所示:

// pages/test/test.js
let pageSize = 10;//每页加载的数据量
let pageNum = 1;//当前页
let totalPage = 0;//总页数
let resultData = [];
Page({

    /**
     * 页面的初始数据
     */
    data: {
        testList:[],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let tempData = [];
        for(let i=0; i<20;i++){
            let str = "";
            str = "第"+i+"条";
            tempData.push(str);
        }
        this.setData({
            testList : tempData
        })
    },


    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        
        if(this.pageNum < this.totalPage){
            this.pageNum += 1;
            //加载下一页
            this.loadData();
        } else {
            wx.showToast({
                icon:"none",
              title: '没有更多数据了',
            })
        }
    },

    loadData: function(){
        wx.request({
          url: 'http://test.com',   //假的后台接口
          method: 'POST',
          data:{
              pageSize: this.pageSize,
              pageNum: this.pageNum,
          },
          success:function(res){
              this.pageNum = res.data.content.pageNum;
              this.totalPage = res.data.content.totalPageNum;
              this.resultData = res.data.content.rows;
          },
          fail: function(res){

          }
        })
    }
})
复制代码

可以看到代码中的逻辑比较简单，最主要的一点就是根据当前页 pageNum 与总页数totalPage做比较。

代码中的网络请求接口为虚构的，返回的数据结构是根据我们现有的后台接口返回的数据格式来做处理的，数据结构如下图所示：

所以这个地方的代码仅供参考，具体的分页数据要根据后台返回的数据结构进行处理。

好了，代码就这些，希望上面的内容对你有所帮助。