微信小程序ColorUI自定义底部导航条TabBar

天小天
3,700 阅读3分钟

一、项目中引入ColorUI

ColorUI其实是一套小程序的CSS框架，最近使用的比较多，刚好在自定义底部导航栏遇到一些坑，特有以此推文。

微信小程序自定义底部导航条tabBar，有两种主流方式，一种是将TabBar页面和底部导航条作为组件，进行模拟切换，但是严格来说这种方式不太适用于复杂场景，很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口，来实现接管系统TabBar，这也是本文的实现方法，能够完美复刻默认系统TabBar，更可增加自定义的功能实现。

一、通过文件复制引入

  1. 进入ColorUI 的GitHub，拉下所有代码，项目中有三个目录，一个是ColorUI-UniApp这个是uni-app版本，一个是demo完整的案例版本，一个是template初始开发版本，复制demo或者template文件夹中的ColorUI文件夹至项目根目录。

  2. 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组件

  1. 需要在根目录建 custom-tab-bar 文件夹
  2. 再在custom-tab-bar文件夹内建index 组件文件

五、引入ColorUI样式至custom-tab-bar组件

  1. 因为组件内需要使用ColorUI的样式，但是在app.wxss中引入是作用不到custom-tab-bar组件的，所以需要在custom-tab-bar组件中index.wxss引入ColorUI样式文件。
  2. 虽然引入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
  1. 首先需要设置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": "我的"
	}
]
  1. 设置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}`,
     })
    }
},
  1. 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
  1. 动态绑定class
class="action {{selected === 0 ? 'active' : 'default'}}"
  1. 绑定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
  1. 设置 默认.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

  1. 设置给tabBar页面当前项保持高亮
//需要在钩子函数中手动调用  tabBar()
tabBar() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
},
  1. 各个页面代码
//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
		})
	}
},

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网

avatar
文章
阅读
粉丝
相关推荐
微信小程序+vantui实现自定义tabBar
2.8k阅读
 · 
10点赞
微信小程序踩坑记 - scroll-view 上拉加载与 page 的下拉刷新冲突
9.4k阅读
 · 
57点赞
微信小程序实现城市索引选择+搜索
603阅读
 · 
2点赞
微信小程序两种下拉刷新和上拉加载全面分析和应用
1.3k阅读
 · 
2点赞
微信小程序项目实战（商城）
3.2k阅读
 · 
95点赞
超简单的头部自定义导航栏,几行代码实现，uniapp适用做移动端小程序使用
254阅读
 · 
3点赞
uniapp自定义tabBar
72阅读
 · 
0点赞
微信小程序使用vant 和 mobx 自动定义Tabbar
609阅读
 · 
0点赞
微信小程序配置自定义TabBar不闪烁（组件版）
308阅读
 · 
1点赞

友情链接：