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

微信小程序实现上拉加载更多功能：从基础到优化

article 2024/10/9 20:29:33

实现上拉加载更多功能：从基础到优化

在移动互联网时代，上拉加载更多功能已成为用户浏览内容时的常见需求。本文将详细介绍如何在小程序中实现这一功能，并进行相关优化。

实现上拉加载

当用户从下向上滑动屏幕时，需要加载更多的商品数据。实现这一功能的关键在于监听用户的上拉行为，并在触发时发送请求获取下一页的数据。

实现步骤：

声明onReachBottom事件处理函数：
在.js文件中，声明onReachBottom方法，用于监听用户的上拉行为。
页码递增并发送请求：
在onReachBottom方法中，对页码page进行加1操作，并发送请求获取下一页的数据。
合并数据：
在getGoodsList函数中，将返回的数据与原有的数据进行合并，并更新到页面的数据中。

import { reqGoodsList } from '../../../api/goods';

Page({
  data: {
    goodsList: [], // 商品列表数据
    total: 0, // 列表总数据量
    requestData: {
      page: 1, // 页码
      limit: 10, // 每页请求多少条数据
      category1Id: '', // 一级分类 id
      category2Id: '' // 二级分类 id
    }
  },
  
  // 获取商品列表的数据
  async getGoodsList() {
    const { data } = await reqGoodsList(this.data.requestData);
    this.setData({
      goodsList: [...this.data.goodsList, ...data.records],
      total: data.total
    });
  },

  // 监听页面的上拉操作
  onReachBottom() {
    let { page } = this.data.requestData;
    this.setData({
      requestData: { ...this.data.requestData, page: page + 1 }
    });
    this.getGoodsList();
  }
});

判断加载是否完毕

为了避免用户在上拉加载完毕后仍进行无效操作，我们需要判断数据是否已经加载完，并在加载完毕后给出提示。

实现步骤：

对比total和goodsList的长度：
在onReachBottom方法中，对比后端返回的total和当前goodsList的长度，如果相等则说明数据已加载完。
更新页面状态：
如果数据已加载完，则更新页面的状态，并给出提示。

Page({
  // ...其他代码

  onReachBottom() {
    const { total, goodsList, requestData } = this.data;
    let { page } = requestData;

    if (total === goodsList.length) {
      this.setData({ isFinish: true });
      return;
    }

    this.setData({
      requestData: { ...this.data.requestData, page: page + 1 }
    });
    this.getGoodsList();
  }
});

节流阀进行列表节流

为了避免在网络较慢的情况下，用户频繁滑动导致的请求浪费，我们需要为上拉加载添加节流功能。

实现步骤：

定义节流阀状态isLoading：
在页面的初始数据中，定义isLoading状态，用于判断当前是否有请求正在发送。
在请求前后更新isLoading状态：
在getGoodsList函数中，发送请求前将isLoading设置为true，请求结束后设置为false。
在onReachBottom中判断isLoading状态：
如果isLoading为true，则不进行下一页数据的加载。

Page({
  data: {
    // ...其他数据
    isLoading: false, // 判断数据是否正在加载
  },

  // 获取商品列表的数据
  async getGoodsList() {
    this.setData({ isLoading: true });
    const { data } = await reqGoodsList(this.data.requestData);
    this.setData({
      goodsList: [...this.data.goodsList, ...data.records],
      total: data.total,
      isLoading: false
    });
  },

  // 监听页面的上拉操作
  onReachBottom() {
    const { total, goodsList, requestData, isLoading } = this.data;
    let { page } = requestData;

    if (isLoading) return;

    // 判断数据是否加载完毕及后续代码...
  }
});