vant (Vue组件库) 下拉加载 会出现加载两次的情况
List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。<van-pull-refresh v-model="isRefresh" @refre...
·
List 组件通过loading
和finished
两个变量控制加载状态,当组件滚动到底部时,会触发load
事件并将loading
设置成true
。此时可以发起异步操作并更新数据,数据更新完毕后,将loading
设置成false
即可。若数据已全部加载完毕,则直接将finished
设置成true
即可。
<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
<van-list :finished="finished" @load="onload" v-model="loading" :offset="200"> <!--进入页面时,load会触发一次-->
<div class="list-item" v-for="(item,index) in goodList" :key="index"
<div class="list-item-text">
<div>{{item.NAME}}</div>
</div>
</div>
</van-list>
</van-pull-refresh>
export default {
data() {
return {
loading: false, //是否在上拉加载
isRefresh: false, //是否在刷新
finished: false, //是否还有商品
timer: null
}
},
- 在网页实际运行的某些场景下,有些事件时会被不间断的被触发的,如resize事件,而不像是我们想象中的,滚动一次触发一次。这种情况下,由于过于频繁地DOM操作和资源加载,严重影响了网页性能,甚至会造成浏览器崩溃。
- 如:滚动到页面底部加载更多,稍微滚动一下就会触发n多次scroll事件,此时就可以用到节流的方法:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
methods: {
if(!this.timer){
this.timer = setTimeout(() => {
this.getGoods() //请求商品数据的方法
this.timer = null;
}, 1000)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)