微信小程序 实现滑动到底部加载更多数据

展示：

all.js
 

// 引用公共配置文件
const config = require('../../utils/config.js');


Page({
  data: {
    buildingList: [],    // 存储建筑物列表
    pageNum: 1,          // 当前页码
    pageSize: 20,        // 每页数据数量
    totalPage: 1,        // 总页数
    isLoading: false,    // 是否正在加载数据
  },

  onLoad() {
    this.loadData(); // 初次加载数据
  },

  onReady() {
    // 页面准备好时的处理，暂时不需要额外操作
  },

  loadData() {
    const { pageNum, pageSize, buildingList, isLoading } = this.data;

    if (isLoading) return; // 防止重复请求

    this.setData({
      isLoading: true, // 设置为加载中
    });

    wx.request({
      url: `${config.BASE_URL}/building/hobby/list?pageNum=${pageNum}&pageSize=${pageSize}`,
      method: 'GET',
      success: (res) => {
        if (res.data.code === 200) {
          const newData = res.data.rows.map(item => ({
            ...item,
            pic: config.BASE_URL + item.pic, // 拼接图片完整路径
          }));

          // 更新数据
          this.setData({
            buildingList: buildingList.concat(newData), // 合并新数据
            pageNum: pageNum + 1,                      // 页码加1
            totalPage: res.data.total || 1,         // 更新总页数
          });
        } else {
          wx.showToast({
            title: '数据加载失败',
            icon: 'none',
          });
        }
      },
      fail: () => {
        wx.showToast({
          title: '请求失败',
          icon: 'none',
        });
      },
      complete: () => {
        this.setData({
          isLoading: false, // 加载完成，解除加载中状态
        });
      },
    });
  },

  // 滑动到底部加载更多
  onReachBottom() {
    const { pageNum, totalPage } = this.data;

    if (pageNum > totalPage) {
      wx.showToast({
        title: '没有更多数据了',
        icon: 'none',
      });
      return;
    }

    this.loadData(); // 请求下一页数据
  },
});