场景:如图所示,不同的tab栏的内容高度不一致,如果由全部的导航栏切换到感觉划算的导航栏时,由于容器高度发生了变化,页面中的onReachBottom方法会触发。
但是实际开发中,我们通常只是希望页面下拉到底部时才会触发此事件,解决办法有很多,例如:
- 可以在页面中设置onReachBottomDistance来规定下拉到多少距离时才会触发此事件
在这里,使用watch监听的方法来限制onReachBottom事件的触发;
- 定义一个变量isReachBottom默认值为true
data() {
return {
isReachBottom:true
}
}
2.watch监听当前导航栏的变化,如果变化了,就把isReachBottom设置为false,这样就算高度变化触发了onReachBottom方法,使得代码不往下执行(看第三点)
watch:{
currentTab() {//currentTab是当前的导航栏
this.isReachBottom = false;
}
},
- 在onReachBottom顶部用设置方法是否可以往下执行
onReachBottom() {
if(!this.isReachBottom) return;
to do......
}
最后,在tab切换时,请求当前tab数据完成时需要把isReachBottom属性值还原为默认值true,这样在当前tab下拉触底时才会触发onReachBottom。