vue-scroll,van-list苹果手机重复请求问题

背景:做一个可下拉加载的数据列表,因为样式问题导致只使用van-list没办法触发loading,使用overflow: hidden也是没效果,所以使用了vue-scroll包住了van-list。最近测试同事(IOS系统)发现下拉后加载的数据是重复的,而我在自己手机(安卓手机)怎么都重现不了,遂定位到IOS不兼容。

1、van-list兼容IOS系统下拉加载同时发出多个请求问题

  • 定义loading: false,在van-list加上:loading="loading"
  • 在请求方法的最前面加上this.loading = true,加载结束后this.loading = false
<vue-scroll style="height: 335px" @handle-scroll="onScroll" v-if="itemList.length > 0 && showMore">
  <van-list v-model="loading" class="scrollList" :finished="finished" :immediate-check="false">
    <template #finished>
      <div v-if="itemList.length == 0">暂无数据</div>
      <div v-else>没有更多了</div>
    </template>
    ·
    ·
    ·
    其他无关代码
    ·
    ·
    ·
  </van-list>
</vue-scroll>
getItemList() {
  this.loading = true
  this.$axios.get('xxxxxxxx', { params: params }).then(res => {
  if (res) {
    ·
    ·
    ·
    其他无关代码
    ·
    ·
    ·
    this.loading = false
    this.canTriggerScroll = true
  })
}

2、vue-scroll兼容IOS系统下拉加载同时发出多个请求问题

  • 定义一个全局变量canTriggerScroll: true,每次请求数据时都去判断这个变量的值是否符合预期的值,符合设置false,等请求完毕再设置回true
onScroll (even) {
  if (!this.canTriggerScroll) {
    return
  }
  this.canTriggerScroll = false
  // 数据请求方法
  this.getItemList()
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值