小程序tabBar 小红点 原生怎么实现

小程序自定义组件：带未读数目的tab按钮组件的使用可以直接复制dist中的文件，到你的项目的pages页。如果放到其他的目录，需要相应修改下列引用中的路径( ./path/to/file/tabbar.subfix )index.wxml (页面的 wxml文件中)[mw_shl_code=applescript,true][/mw_shl_code]#### index.wxss (页面的备山 wxss 文件)[mw_shl_code=applescript,true] /* 引入tabbar的样式 */@import "../template/tabbar.wxss"[/mw_shl_code]index.js (页面的 js 文件)文件头部：[mw_shl_code=applescript,true]import { init,// 初始仿春中化组件及页面 Tabbar, // Tabbar是组件的事件注册中心 setTabbarData// 设置/更新 tabbar显示的数据} from "../template/森慎tabbar"[/mw_shl_code]文件内部：调用init(object)函数，初始化页面[mw_shl_code=applescript,true]let UserPageData = {data: {name: "Jonham.Chen"},onLoad: function() {},// ... any others}init(UserPageData)[/mw_shl_code]文件内部：调用})setTabbarData(tabbarData)[/mw_shl_code]文件内部：调用Tabbar.addListener(fn)函数增加tab的监听事件[小程序tabBar 小红点 原生怎么实现

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

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

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

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

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

文件目录

引用组件

组件的data

组件的路由跳转

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

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

END

往期文章

个人主页

---