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