实现上拉加载更多功能：从基础到优化
在移动互联网时代，上拉加载更多功能已成为用户浏览内容时的常见需求。本文将详细介绍如何在小程序中实现这一功能，并进行相关优化。
实现上拉加载
当用户从下向上滑动屏幕时，需要加载更多的商品数据。实现这一功能的关键在于监听用户的上拉行为，并在触发时发送请求获取下一页的数据。
实现步骤：
-
声明
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;
// 判断数据是否加载完毕及后续代码...
}
});
通过以上步骤，我们成功实现了上拉加载更多功能，并进行了加载完毕判断和节流优化。这些优化不仅提升了用户体验，还避免了不必要的请求浪费。希望本文对你有所帮助！