uni-app实现 上拉加载更多 添加节流阀避免多次请求

废话不多说，直接上代码

1：在项目根目录page.json配置文件，当前的页面上配置上拉触底的距离

{
         "path": "goods_list/goods_list",
         "style": {
           "onReachBottomDistance": 150
         }
       },

2：data中自定义数据

data() {
  return {
  //请求参数对象
  queryObj: {
      // 查询关键词
      query: '',
      // 商品分类Id
      cid: '',
      // 页码值
      pagenum: 1,
      // 每页显示多少条数据
      pagesize: 10,
   },
   //商品列表数据
   goodsList: [],
   //总数量，用来实现分页
   total: 0,
   //节流阀
   isLoading: false
   };
},

3：onLoad初始化数据

    onLoad(options) {
      console.log(options)
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''

      this.getGoodsList()
    },

4：methods放请求方法

   methods: {
      async getGoodsList() {
        //开启节流阀
        this.isLoading = true      
        const { data: res } = await uni.$http.get('*******', this.queryObj)
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        console.log(res)
        //请求完成，关闭节流阀
        this.isLoading = false        
        // 为数据赋值
        //上拉加載更多，，定义一个新数组，将旧数组展开，再将旧数组展开
        this.goodsList = [...this.goodsList , ...res.message.goods] 
        this.total = res.message.total             
      }
    },

5：与methods方法平级，放置onReachBottom方法，实现下拉加载更多

    onReachBottom() {
       //如果下面的公式成立，则证明没有下一页数据了
       //当前的页码值 * 每页显示多少条数据 >= 总数条数
       //pagenum * pagesize >= total

      //判断数据是否加载完毕,依赖服务端返回总条数字段，如果服务端没返回，可以去除这段代码
      if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){
        return uni.$showMsg('数据加载完毕')
      }


      //下拉加载更多，判断是否正在请求其他数据
      if(this.isLoading) return  
      //頁碼值自增+1
      this.queryObj.pagenum += 1
      // 重新获取列表数据
      this.getGoodsList()
    }