微信小程序自定义Tabbar,附详细源码
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序自定义Tabbar,附详细源码相关的知识,希望对你有一定的参考价值。
参考技术A分享一个完整的微信小程序自定义 Tabbar ,tabbar按钮可以设置为跳转页面,也可以设置为功能按钮。懒得看文字的可以直接去底部,博主分享了GitHub地址。
由于微信小程序自带的 Tabbar 功能比较单一,比如要做到中间是一个突出的圆形扫一扫按钮,就需要自定义 Tabbar 了。
博主创建了一个 Tabbar 组件,自己写的样式,在需要用到的页面引入组件。
组件使用了 position: fixed 定位到底部,所以在用到组件的页面,需要给 page 加上 margin-bottom 样式。
交互是通过在组件上定义的 bindtap 事件,来进行跳转页面或者触发功能模块,其中路由跳转是用的 wx.switchTab 。事件以及传参可以通过 triggerEvent ;
文件目录
引用组件
组件的data
组件的路由跳转
源码GitHub地址:https://github.com/pdd11997110103/ComponentWarehouse
如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;
END
往期文章
个人主页
以上是关于微信小程序自定义Tabbar,附详细源码的主要内容,如果未能解决你的问题,请参考以下文章