前言
微信小程序本身提供的app.json中配置tabbar或是自定义tabbar的写法都没有突出效果的，所以想要个性化样式，需要自定义tababr
gitee项目地址
效果展示
使用圈子记账微信小程序为例
开发过程
参考微信公众平台小程序指南中的自定义tabBar构建过程
第一步：配置信息
- 在
app.json中的tabbar项指定custom字段，定义为true，允许使用自定义tabBar
app.json配置
第二步： 添加自定义tabBar代码文件
- 在代码根目录下添加入口文件，文件名字： custom-tab-bar
注意：一定创建在根目录下，跟app.json在同一层级，文件名字必须是 custom-tab-bar
文件目录
第三步： 编写自定义tabBar代码
- 用自定义组件的方式编写即可，该自定义组件完全接管tabBar的渲染
WXML
navigator导航的使用，进行跳转
wxml结构: tabbar_box —>tabbar_nav —>image + text
逻辑实现：
1.首先判断是否是isSpecial，进行图标突出渲染和普通渲染
2.再判断是否为选中状态： selected === index
js
1.在data中定义tabbar相关数据(可以拷贝定义在app.json中的tabbar配置)
细节注意： 通过isSpecial来标记突出的选项
data: {
"selected": 1,
"backgroundColor": "#ffffff",
"color": "#cdcdcd",
"selectedColor": "#FFBE00",
"list": [{
"pagePath": "/pages/statistics/statistics",
"text": "统计",
"iconPath": "/assets/images/tabBar/account.png",
"selectedIconPath": "/assets/images/tabBar/account_active.png"
}, {
"pagePath": "/pages/add/add",
"text": "账单",
"isSpecial": true,
"iconPath": "/assets/images/tabBar/account_list.png",
"selectedIconPath": "/assets/images/tabBar/add.png"
}, {
"pagePath": "/pages/profile/profile",
"text": "我的",
"iconPath": "/assets/images/tabBar/profile.png",
"selectedIconPath": "/assets/images/tabBar/profile_active.png"
}]
}
2.通过监听在navigator上的bindtap事件switchTab，来动态修改当前选中tab的index值
细节注意： 通过data-index="{{index}}"把当前选中的tab的index传给监听事件switchTab
methods: {
switchTab(e){
const index = e.currentTarget.dataset.index
this.setData({
selected: index
})
}
}
WXSS
主要用到了 定位（fixed，relative，absolute），弹性布局flex
分析：
1.首先对父元素tabbar_box的position：fixed目的让tabbar定位在页面底部
2.再对父元素tabbar_box的display: flex;目的是让其子元素水平平均排列
3.再对tabbar_box的z-index=999;目的是让tabbar层级优选级最高
4.然后对其子元素tabbar_nav的flex: 1平均分配父元素的空间；
5.再对tabbar_nav设置为flex，flex-direction: column,让其子元素垂直排列
6.再对tabbar_nav设置relative，目的是为了其子元素image的absolute定位，做出突出效果来
第四步：实现tab选中态，要在当前页面下，通过getTabBar接口获取组件实例，并调用setData更新选中态
- 自定义组件新增
getTabBar接口，可获取当前页面下的自定义tabBar组件实例
目的： 解决tab选中问题
// pages/statistics/statistics.js
Page({
onShow: function(){
if (typeof this.getTabBar === 'function' && this.getTabBar()){
this.getTabBar().setData({
selected: 0
})
}
}
})
// pages/add/add.js
Page({
onShow: function(){
if (typeof this.getTabBar === 'function' && this.getTabBar()){
this.getTabBar().setData({
selected: 1
})
}
}
})
// pages/profile/profile.j
Page({
onShow: function(){
if (typeof this.getTabBar === 'function' && this.getTabBar()){
this.getTabBar().setData({
selected: 2
})
}
}
})
踩坑填坑过程
1.因为
app.json中tabBar配置项无法满足tabBar的个性定制.(比如：图标的突出效果)
2.所以尝试官方提供的自定义tabBar方法，根据提供的代码结合自己的项目进行搭建。
3.在这个过程中，在微信开发者工具中实现了tab 图标的突出效果，但是苹果真机中却无法实现，细读官方文档才得知目前cover-view不支持overflow：visible；
4.启发： 细读官方文档的重要性，也许读第一遍不能很好的理解，但是在实践过程中通过采坑，会让你更加深刻的理解
5.所以放弃了官方自定义tabBar的方法，在网上找了好多相关tabbar的项目，终于在各位大佬的造轮子的基础上，给了自己的启发，再结合官方的自定义tabbar，写出了自己的custom-tab-bar
期间用时3天左右！！！
尾声
到此我们就实现了突出效果，首先感谢大佬提供的轮子，在他们的基础上进行了改变，如果侵权，请联系我，我会第一时间删除本文章。
