我是靠谱客的博主 寒冷雪碧，这篇文章主要介绍使用vant组件中van-tabs、van-pull-refresh和van-list时，切换tabs标签，列表重复加载问题。，现在分享给大家，希望可以做个参考。
问题现象：tabs切换时，如果之前的tab已经滚动到底部，直接点击其他的tab，将再触发一次onload事件。
问题原因：这种情况下，切换tab会导致触发两次请求数据的方法，一次是监听tab切换事件执行的，另一次是由于之前一个tab已经滚动到底部触发的onload事件。
解决措施：设置一个全局变量tabchange，监听到tab切换事件时设置tabchange为true，在onload事件中，只有判断tabchange为false时才请求数据，并且总是设置tabchange为true。
上代码：
复制代码
1
2
3
4
5//初始化 data(){ tabchange: false }
复制代码
1
2
3
4
5
6
7
8
9
10
11//onload加载事件 onLoad(){ var that = this setTimeout(() => { if(!that.tabchange){ that.getListData() } that.tabchange=false }, 500); },
复制代码
1
2
3
4
5
6//tab切换事件 changeType(value){ this.tabchang=true //其他更改 },
最后
以上就是寒冷雪碧最近收集整理的关于使用vant组件中van-tabs、van-pull-refresh和van-list时，切换tabs标签，列表重复加载问题。的全部内容，更多相关使用vant组件中van-tabs、van-pull-refresh和van-list时内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复