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: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值