1.ColorUI官网：https://www.color-ui.com/
2.Github仓库：https://github.com/weilanwl/coloruicss
3.app.wxss:
@import 'colorui/main.wxss';
@import 'colorui/icon.wxss';
@import 'colorui/animation.wxss';
4.app.json:
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
5.将\demo\images\tabbar里的\images\tabbar按文件目录复制到项目根目录
6.在页面里面添加Tabbar导航page/index/index.wxml文件：
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" bindtap="NavChange" data-cur="basics">
<view class='cuIcon-cu-image'>
<image src="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>
</view>
<view class="action" bindtap="NavChange" data-cur="component">
<view class='cuIcon-cu-image'>
<image src="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='component'?'text-green':'text-gray'}}">组件</view>
</view>
<view class="action" bindtap="NavChange" data-cur="plugin">
<view class='cuIcon-cu-image'>
<image src="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='plugin'?'text-green':'text-gray'}}">扩展</view>
</view>
<view class="action" bindtap="NavChange" data-cur="about">
<view class='cuIcon-cu-image'>
<image src="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image>
</view>
<view class="{{PageCur=='about'?'text-green':'text-gray'}}">关于</view>
</view>
</view>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
*修改index.js文件：
Page({
data: {
PageCur: 'basics'
},
NavChange(e) {
this.setData({
PageCur: e.currentTarget.dataset.cur
})
},
})
7.如果不在页面里面添加tabbar导航，则需要在根目录下新建文件夹custom-tab-bar和4个index文件：
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
添加custom-tab-bar/index.wxss文件：
@import "../colorui/main.wxss";
@import "../colorui/icon.wxss";
view {
--green: #39b54a;
--gray: #aaaaaa;
--white: #ffffff;
}
修改custom-tab-bar/index.wxml文件：
<!-- custom-tab-bar/index.wxml -->
<view class="cu-bar tabbar bg-white foot">
<!-- 首页 -->
<view class="action {{PageCur=='home'?'text-green':'text-gray'}}" data-cur="home" bindtap="NavChange">
<view class="cuIcon-homefill"></view> 首页
</view>
<!-- 我的、左上角红色圆点 -->
<view class="action {{PageCur=='mine'?'text-green':'text-gray'}}" data-cur="mine" bindtap="NavChange">
<view class="cuIcon-my">
<!-- 红色圆点（数字角标） -->
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
修改custom-tab-bar/index.js文件：
Page({
data: {
PageCur: '',
Page: {
home: '/pages/index/index',
mine: '/pages/logs/logs'
}
},
NavChange(e){
wx.switchTab({
url: this.data.Page[e.currentTarget.dataset.cur],
})
},
})
修改tabbar页面的onShow函数
修改pages/index/index.js文件：
onShow() {
this.getTabBar().setData({
PageCur: 'home'
})
},
修改pages/logs/logs.js文件：
onShow() {
this.getTabBar().setData({
PageCur: 'mine'
})
},
修改app.json文件：
{
"pages": [
],
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/my/my",
"text": "我的"
}]
}
}
