微信自定义tabbar有小红点_微信小程序自定义 tabbar

一定的需求情况下，无法使用小程序原生的 tabbar 的时候，需要自行实现一个和 tabbar 功能一模一样的自制组件。

查阅了海量的博客和文档之后，亲自踩坑。总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法。并说说这几种方法各自的特色。

类 navigator 跳转方式

类 navigator 跳转方式是我自己起的名称，因为它的实现思路就是这个样子的。期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路。进行了这种方式的尝试，并为后续提供了解决思路。在这次实践的过程中使用了和该博文类似的目录结构。

template 文件主要包含了 tabbar 的内容、逻辑、模板、样式。

tabbar_template.js

//初始化数据

functiontabbarinit() {return[

{"current": 0,"pagePath": "/pages/travel_shop/travel/travel_index/travel_index","iconPath": "/pages/img/tab_icon_home@2x.png","selectedIconPath": "/pages/img/tab_icon_home_sel@2x.png","text": "首页"},

{"current": 0,"pagePath": "/pages/travel_shop/travel/travel_car/travel_car","iconPath": "/pages/img/tab_icon_shop@2x.png","selectedIconPath": "/pages/img/tab_icon_shop_sel@2x.png","text": "购物车"},

{"current": 0,"pagePath": "/pages/travel_shop/travel/travel_my/travel_my","iconPath": "/pages/img/tab_icon_my@2x.png","selectedIconPath": "/pages/img/tab_icon_my_sel@2x.png","text": "我的"}

]

}//tabbar 主入口

function tabbarmain(bindName = "tabdata", id, target) {var that =target;var bindDa