问题背景:在van-list中我放了一个tab切换的导航,当选中第一个tab时,列表向下滑动,加载三页数据,这时,用户切换tab会发现van-list会一下子触发三次@load绑定的事件,而不是加载新tab的第一页数据。代码如下:
解决方案:给列表父级元素(上图中class为more-list)设置样式:min-height:100vh;,同时,在tab切换的方法中置空列表数据,具体代码示例如下:
//切换分组
changeTab(item,index) {
console.log('切换分组')
//切换了分组才重新获取值
if(this.tabActive != index && this.hongrenloading == false){
//设置tab选中
this.tabActive = index;
//页码重置为 0
this.hongrenPageIndex = 0;
//重置翻页完成状态
this.hongrenfinished = false;
if(this.tabIsFixed) {
console.log('当前tab距上的距离',this.$refs['moreListTop'].offsetTop)
window.scrollTo(0, this.$refs['moreListTop'].offsetTop+this.$refs['moreTab'].offsetTop*0.3);
}
//重新获取数据
this.livingGoodsList = [];
this.getHongRenData();
}