最近在做一个小程序,其中有预览图片的功能。好巧不巧,这是一个tabbar页面,于是在onshow里面写了刷新列表数据的操作。结果在预览列表中的图片的过程中,发现关闭预览图片时触发了onshow,导致了页面数据刷新了。
于是想了几个解决办法,但是中心思想都是一样的。主要依靠变量来控制是否是真的重新进入了页面,是否需要刷新数据。
export default {
data() {
return {
figh: false,
}
}
}
在预览图片时,previewImage前(或者使用的第三方组件,就在组件的外层盒子增加方法)设置变量为true,此时关闭预览,在onshow中判断变量,如果为true,则不更新数据。
onShow(options) {
if (this.figh) {
return
}
// 继续你本来的操作
},
由于在预览图片时,onshow、onhide都会接连触发,我一开始在onhide设置了figh为false,导致没有达到预期效果。后来想了想,是否可以用时间差来判断,如果onshow、onhide触发时间间隔太小,则判断为图片预览。但是安卓和ios的判断逻辑不不同。安卓很快,100ms以内,但是ios在1.5s左右。1.5s则不能直接判断为非人为操作了。因此判断时间差不行。
最终使用的方法是,在页面跳转或者切换tabbar页面时去修改变量的值。最终达到了想要的效果
//切换底部导航
changeTabbar(val) {
this.changeFigh(false)
uni.switchTab({
url: val.path
})
},
toSearch() {
console.log('跳转到搜索页面')
this.changeFigh(false)
uni.navigateTo({
url: '/pages/community/search/index'
})
},