对于刚接触小程序的小白来说，总是难免会遇到各种坑，唯独只有记录下来踩坑的过程，才能在后期避免在同一个地方不断的跌倒。tabbar导航是最常见的展现形式，但是为了展现自己独有的特色，往往会设计的稍微与众不同，首先要实现通用的tabbar效果，其次还要有个性化的样式，这就难到刚接触的大部分人。 刚接触小程序只能在网上搜索，其次翻阅官方文档，目前感觉官方文档部分还是稍微有点乱，每次想找个接口或者组件，总感觉不只一个地方，就比如这个tabbar。 原始的tabbar属于扩展能力：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html 自定义的tabbar却在指南里：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
对于新手来说这样的操作完全不适应，也搞不懂为什么不能放在一起，明明就是一类东西及他的扩展，哎，一家独大的东西只能去适应。
直接上自定义tabbar：
一、按照官方的定义，首先需要在app.json里配置tabbar数据，官方的标准直接看以上链接就可以，自己通过尝试，发现只要配置最重要的配置就可以：
"pages": [ "pages/logs/logs", "pages/index/index", "pages/user/user", "pages/list/list" ], "tabBar": { "custom": true, //自定义tabbar必须指定当前属性为true "list": [ { "pagePath": "pages/logs/logs" }, { "pagePath": "pages/list/list" }, { "pagePath": "pages/index/index" }, { "pagePath": "pages/user/user" } ] }, "usingComponents": {}需要在页面展现的tabbar对应的页面，必须在这里进行配置，否则点击tab切换会报错：switchTab:fail can not switch to no-tabBar page
意思就是要切换的页面没有在tabbar里进行配置，所有页面也必须在pages里面进行配置。 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
二、在根目录新建目录 custom-tab-bar , 目录下面建立 index.js , index.wxss , index.json , index.wxml , 名字必须是这样的，不能定义其他的，至于为什么，目前不知道。
index.wxml
<cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </cover-view> </cover-view>index.wxss
/* custom-tab-bar/tabbar.wxss */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); } .tab-bar-border { background-color: rgba(0, 0, 0, 0.33); position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleY(0.5); } .tab-bar-item { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tab-bar-item cover-image { width: 27px; height: 27px; } .tab-bar-item cover-view { font-size: 10px; }index.js
// custom-tab-bar/tabbar.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { selected: 0, color: "#f60", selectedColor: "#3cc51f", color: "#7A7E83", "selectedColor": "#f00", "borderStyle": "black", backgroundColor: "#ffffff", list: [ { pagePath: "/pages/logs/logs", text: "首页", iconPath: "/image/icon_API.png", selectedIconPath: "/image/icon_API_HL.png" }, { "pagePath": "/pages/user/user", text: "用户", iconPath: "/image/icon_component.png", selectedIconPath: "/image/icon_component_HL.png" }, { pagePath: "/pages/list/list", text: "列表", iconPath: "/image/icon_API.png", selectedIconPath: "/image/icon_API_HL.png" }, { "pagePath": "/pages/index/index", text: "会员中心", iconPath: "/image/icon_component.png", selectedIconPath: "/image/icon_component_HL.png" } ] }, /** * 组件的方法列表 */ methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path console.log("切换index>>>"+data.index); wx.switchTab({ url }) this.setData({ selected: data.index }) } } })这个页面必须配置完整的数据，tabbar展示的数据从这里的list获取，switchTab方法就是切换tab事件，都很容易看懂，就不详细说明。
三、在pages里建立对应的tab切换页面，就是第一步配置的页面，必须存在。(页面的位置不一定要在pages里，可以自己归纳，只要配置路径正确就可以) 基础的搭建到此为止，可以运行起来了，编译试试，会发现，tabbar效果有了，但是切换的时候，第一次点击tab页面切换了，但是tab图标和文字颜色效果没有变化，点击第二次才会有效果，这个应该是点击之后没有在tab页面设定tabbar的 select index，不知道是不是bug，这里需要在每一个tab页面的onShow里添加如下方法：
onShow: function () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 3 //这里的数字设置当前页面在tabbar里对应的序列，从0开始 }) } }此时再次编译，大功告成。
四、如果需要导航样式个性化处理的，可以修改index.wxml ， index.wxss 结合数据状态进行操作，譬如：
这里因为只是修改页面和样式文件，每家都不一样，就不展示代码了。
