微信小程序的问题

Question

今天做小程序，发现了一个问题，点击美食， 数据下拉加载到第二页时候，我在点击其他一级分类，
当我点击其他的一级分类的时候，这时候由于这个分类数据太少 导致出现了一个下拉的动作，然后发生两次请求 导致数据产生了两份

有什么好的 解决方法 麻烦大佬指点一下

贴一下主要代码

  getMerchantList:function(){
    const that = this
    const {pageNum,shopId,shopLabelId} = that.data
    const reqBody = {
      pageNum:pageNum,
      pageSize:10,
      shopLabelId:shopLabelId,
      squareId:shopId
    }
    ajax.sendRequest("squareshop/getBindingShopList",'post',reqBody).then(res=>{
      let list = that.data.shoppingList
      let items = res.data.data.items
      if(items){
        for(var i = 0; i<items.length; i++){
          list.push(res.data.data.items[i])
        }
      }
      that.setData({
        shoppingList:list,
        totalSize:res.data.data.pages,
        // pages:res.data.data.pages
      })
    })
  },

onReachBottom: function () {
    var that = this
    console.log("我下拉了");
    if(that.data.pageNum < that.data.totalSize){
      wx.showLoading({
        title: '正在加载',
      })
      that.setData({
        pageNum: that.data.pageNum + 1,
      })
      that.getMerchantList()
    }
  },

Answer 1

这种情况做限流不太合适，做防抖就更不合适。最简单的策略就是防止并发加载。

你可以增加个标志字段，叫 loading 啥的。getMerchantList 方法一开始判断一下，如果为 true 说明有别的方法里正在走加载数据的逻辑，那就直接 return：

// 伪代码，主要看逻辑
getMerchantList() {
  if (this.loading) {
    return;
  }

  this.loading = true;
  ajax()
    .then((res) => {
       this.list = res.data;
    })
    .finally(() => {
       this.loading = false;
    });
}