12.小程序 之切换到tabBar页面不刷新问题

12.小程序 之切换到tabBar页面不刷新问题,第1张

wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.reLaunch:关闭所有页面,打开到应用内的某个页面。

wx.reLaunch是可以跳转到tabBar页面的。它和wx.switchTab的区别就是:前者可以触发onLoad事件,而后者则不能触发。所以通过wx.reLaunch跳转到tabBar的方式完美解决了不能刷新的问题。

在小程序项目中 我发现 wx.switchTab 跳转是触发onLoad事件  但是只会触发一次 如果我通过退出登录 是不会再次触发onLoad事件 的 而wx.reLaunch是可以跳转到tabBar页面的 再次触发onLoad事件

分享一个完整的微信小程序自定义 Tabbar ,tabbar按钮可以设置为跳转页面,也可以设置为功能按钮。懒得看文字的可以直接去底部,博主分享了GitHub地址。

由于微信小程序自带的 Tabbar 功能比较单一,比如要做到中间是一个突出的圆形扫一扫按钮,就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件,自己写的样式,在需要用到的页面引入组件。

组件使用了 position: fixed 定位到底部,所以在用到组件的页面,需要给 page 加上 margin-bottom 样式。

交互是通过在组件上定义的 bindtap 事件,来进行跳转页面或者触发功能模块,其中路由跳转是用的 wx.switchTab 。事件以及传参可以通过 triggerEvent ;

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址:https://github.com/pdd11997110103/ComponentWarehouse

如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;

END

往期文章

个人主页


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12067812.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存