博客

背景：做一个可下拉加载的数据列表，因为样式问题导致只使用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()
}