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

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

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

实现上拉加载

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

实现步骤

  1. 声明onReachBottom事件处理函数
    .js文件中,声明onReachBottom方法,用于监听用户的上拉行为。

  2. 页码递增并发送请求
    onReachBottom方法中,对页码page进行加1操作,并发送请求获取下一页的数据。

  3. 合并数据
    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();
  }
});
判断加载是否完毕

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

实现步骤

  1. 对比totalgoodsList的长度
    onReachBottom方法中,对比后端返回的total和当前goodsList的长度,如果相等则说明数据已加载完。

  2. 更新页面状态
    如果数据已加载完,则更新页面的状态,并给出提示。

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();
  }
});
节流阀进行列表节流

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

实现步骤

  1. 定义节流阀状态isLoading
    在页面的初始数据中,定义isLoading状态,用于判断当前是否有请求正在发送。

  2. 在请求前后更新isLoading状态
    getGoodsList函数中,发送请求前将isLoading设置为true,请求结束后设置为false

  3. onReachBottom中判断isLoading状态
    如果isLoadingtrue,则不进行下一页数据的加载。

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;

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

通过以上步骤,我们成功实现了上拉加载更多功能,并进行了加载完毕判断和节流优化。这些优化不仅提升了用户体验,还避免了不必要的请求浪费。希望本文对你有所帮助!

猜你喜欢

转载自blog.csdn.net/everfoot/article/details/142750595