一、项目中引入ColorUI
ColorUI其实是一套小程序的CSS框架，最近使用的比较多，刚好在自定义底部导航栏遇到一些坑，特有以此推文。
微信小程序自定义底部导航条tabBar，有两种主流方式，一种是将TabBar页面和底部导航条作为组件，进行模拟切换，但是严格来说这种方式不太适用于复杂场景，很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口，来实现接管系统TabBar，这也是本文的实现方法，能够完美复刻默认系统TabBar，更可增加自定义的功能实现。
一、通过文件复制引入
-
进入ColorUI 的GitHub，拉下所有代码，项目中有三个目录，一个是ColorUI-UniApp这个是uni-app版本，一个是demo完整的案例版本，一个是template初始开发版本，复制demo或者template文件夹中的ColorUI文件夹至项目根目录。
-
App.wxss引入关键Cssmain.wxssicon.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页面切换高亮函数
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}`,
})
}
},
- 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 {{selected === 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
})
}
},
本文演示视频：点击浏览
更多前端内容欢迎关注公众号：天小天个人网
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！