微信小程序开发中的上拉触底的节流处理

如下图,往下面拖动时,会触发getColors函数,获取颜色数据并使colorList自增,但是你在数据没有返回之前多次触发上拉触底,那么就会多次request

处理:

1.在data中定义idloading节流阀

• false表示当前没有进行任何数据请求
• true表示当前正在进行和数据请求

2.在getColors()方法中修改isloading节流阀的值

• 在刚调用getColors时将节流阀设置为true
• 在网络请求的complete回调函数中,将节流阀重置为false

3.在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制

• 如果节流阀的值为true,则阻止当前请求
• 如果节流阀的值为false,则发起数据请求

示例:

.js:

// pages/randomColor/randomColor.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 随机颜色的列表
    colorList: [],
    isloading: false
  },
  // 获取随机颜色的方法
  getColors() {
    this.setData({
      isloading: true
    })
    wx.showLoading({
      title: "数据加载中..."
    });
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({
        data: res
      }) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      // 不论失败与否都会执行下面这个函数
      complete: () => {
        // loading需要自己手动关闭
        wx.hideLoading();
        this.setData({
          isloading: false
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log('触发上拉触底了');
    if (this.data.isloading) {
      return
    } else {
      this.getColors();
    }
  },

触发上拉触底会判断一下isloading的值,如果为true,则不请求,如果为false,则请求