一、项目中引入ColorUI
ColorUI其实是一套小程序的CSS框架，最近使用的比较多，刚好在自定义底部导航栏遇到一些坑，特有以此推文。
微信小程序自定义底部导航条tabBar，有两种主流方式，一种是将TabBar页面和底部导航条作为组件，进行模拟切换，但是严格来说这种方式不太适用于复杂场景，很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口，来实现接管系统TabBar，这也是本文的实现方法，能够完美复刻默认系统TabBar，更可增加自定义的功能实现。
一、通过文件复制引入
进入ColorUI 的GitHub，拉下所有代码，项目中有三个目录，一个是ColorUI-UniApp这个是uni-app版本，一个是demo完整的案例版本，一个是template初始开发版本，复制demo或者template文件夹中的ColorUI文件夹至项目根目录。
App.wxss 引入关键Css main.wxss icon.wxss 即可。
@import "ColorUI/main.wxss"; @import "ColorUI/icon.wxss";
二、app.json中配置系统tabBar
虽然是自定义tabBar，但是tabBar的配置还是要有。
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/category/category",
"text": "分类"
}, {
"pagePath": "pages/cart/cart",
"text": "购物车"
}, {
"pagePath": "pages/user/user",
"text": "我的"
}]
},三、app.json系统 tabBar 设置 "custom": true
tabBar配置中 "custom": true，表示自定义tabBar，由项目根目录下的custom-tab-bar组件接管tabBar渲染。
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/category/category",
"text": "分类"
}, {
"pagePath": "pages/cart/cart",
"text": "购物车"
}, {
"pagePath": "pages/user/user",
"text": "我的"
}]
},
复、在项目根目录新建custom-tab-bar组件
需要在根目录建 custom-tab-bar 文件夹
再在custom-tab-bar文件夹内建index 组件文件
五、引入ColorUI样式至custom-tab-bar组件
因为组件内需要使用ColorUI的样式，但是在app.wxss中引入是作用不到custom-tab-bar组件的，所以需要在custom-tab-bar组件中index.wxss引入ColorUI样式文件。
虽然引入ColorUI的样式，但是由于微信小程序的自定义组件只支持class选择器，所以底部tabBar样式无法完整的显示出来，样式上会有差别，需要自行调整样式。
@import "../ColorUI/main.wxss"; @import "../ColorUI/icon.wxss";
六、选取ColorUI底部导航栏并引入
用微信小程序导入ColorUI的dome在操作条>底部操作条中选取相应的导航条，复制到custom-tab-bar组件的index.wxml
<view class="cu-bar tabbar bg-black"> <view class="action text-green"> <view class="cuIcon-homefill"></view> 首页 </view> <view class="action text-gray"> <view class="cuIcon-similar"></view> 分类 </view> <view class="action text-gray add-action"> <button class="cu-btn cuIcon-add bg-green shadow"></button> 发布 </view> <view class="action text-gray"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 购物车 </view> <view class="action text-gray"> <view class="cuIcon-my"> <view class="cu-tag badge"></view> </view> 我的 </view> </view>
七、设置底部切换高亮,并进行页面切换
（1）文件：custom-tab-bar/index.js
首先需要设置data
//当前高亮项
selected: 0
//tabBar页面数据
tabList: [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"pagePath": "pages/user/user",
"text": "我的"
}
]
复制代码设置tabBar页面切换高亮函数
switb(e) {
let key = Number(e.currentTarget.dataset.index);
let tabList = this.data.tabList;
let selected= this.data.selected;
if(selected !== key){
this.setData({
selected:key
});
wx.switchTab({
url: `/${tabList[key].pagePath}`,
})
}
},custom-tab-bar/index.js完整代码
// custom-tab-bar/index.js
Component({
properties: {},
data: {
//当前高亮项
selected: 0,
//tabBar页面数据
tabList: [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"pagePath": "pages/user/user",
"text": "我的"
}
]
},
attached: function() {},
methods: {
//底部切换
switchTab(e) {
let key = Number(e.currentTarget.dataset.index);
let tabList = this.data.tabList;
let selected= this.data.selected;
if(selected !== key){
this.setData({
selected:key
});
wx.switchTab({
url: `/${tabList[key].pagePath}`,
})
}
},
}
})
复制代码（2）文件：custom-tab-bar/index.wxml
动态绑定class
class="action {{seed === 0 ? 'active' : 'default'}}"绑定data-index参数，绑定switchTab函数
<view class="cu-bar tabbar bg-black">
<view class="action {{selected === 0 ? 'active' : 'default'}}" data-index="0" bindtap="switchTab">
<view class="cuIcon-homefill"></view>
首页
</view>
<view class="action {{selected === 1 ? 'active' : 'default'}}" data-index="1" bindtap="switchTab">
<view class="cuIcon-similar"></view>
分类
</view>
<view class="action text-gray add-action">
<button class="cu-btn cuIcon-add bg-green shadow"></button>
发布
</view>
<view class="action {{selected === 2 ? 'active' : 'default'}}" data-index="2" bindtap="switchTab">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action {{selected === 3 ? 'active' : 'default'}}" data-index="3" bindtap="switchTab">
<view class="cuIcon-my">
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>（3）文件：custom-tab-bar/index.wxss
设置 默认.default样式 高亮 .active样式
.active{
color: #39b54a;
}
.default{
color: #fff;
}（4）文件：
pages/index/index.js
pages/category/category.js
pages/cart/cart.js
pages/user/user.js
设置给tabBar页面当前项保持高亮
//需要在钩子函数中手动调用 tabBar()
tabBar() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
},各个页面代码
//pages/index/index.js
//需要在钩子函数中手动调用 tabBar()
tabBar() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
},
//pages/category/category.js
//需要在钩子函数中手动调用 tabBar()
tabBar() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
},
//pages/cart/cart.js
//需要在钩子函数中手动调用 tabBar()
tabBar() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 2
})
}
},
//pages/user/user.js
//需要在钩子函数中手动调用 tabBar()
tabBar() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected:3
})
}
},
发表评论 取消回复