【前端】解决uniapp 微信小程序 tabbar页面切换返回后 样式闪动的问题

文章讲述了作者在Vue小程序中遇到的TabBar页面下拉框状态问题,通过在`onHide`钩子中缓存状态并在其他页面返回时重新设置,解决了页面切换时的状态问题,但影响了微信自带的返回功能,需要额外处理。

最近遇到一个需求 某tabbar页面(以下称wikipedia)有个下拉框 如果是拉起状态 那么切换到其他页面 再返回 下拉框还是处于拉起状态

要改变状态 一开始我并没有意识到问题的严重性 想直接在onhide里改拉起状态

然后发现从wikipedia切换到其他tabbar页面再返回wikipedia的时候 发现样式是切换前的样式 再闪烁一下后才切换

用了很多种办法都无法解决

后来想到  如果能销毁页面实例的话 也许可行 但是Wikipedia的vm实例上没有$destroy,总之我没找到销毁它的方法

最后我wikipedia里hide钩子里缓存个状态 然后利用relaunch关闭wikipedia  

wikipedia:

onHide(() => {
		uni.setStorageSync('PULL-STATUS', 'close')
	})

其他tabbar页面:

onTabItemTap((data) => {
		uni.getStorageSync('PULL-STATUS') == 'close' && uni.reLaunch({
			url: '/pages/index/index'
		}).then(() => uni.setStorageSync('PULL-STATUS', 'open'))
	})

这样问题就解(fu)决(yan)过去了

但是会出现另一个问题 就是如果wikipedia能跳转其他非tabbar页面 如果你关闭wikipedia会影响wx自带的返回功能  还需要再做处理才行 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值