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()
}

你可能感兴趣的:(vue.js,前端,ios,IOS不兼容)