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

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

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

实现上拉加载

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

实现步骤：

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

import { reqGoodsList } from '../../../api/goods';Page({data: {goodsList: [], // 商品列表数据total: 0, // 列表总数据量requestData: {page: 1, // 页码limit: 10, // 每页请求多少条数据category1Id: '', // 一级分类 idcategory2Id: '' // 二级分类 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;// 判断数据是否加载完毕及后续代码...}
});