1. Introduce ColorUI into the project

ColorUI is actually a set of small program CSS framework, recently used more, just at the bottom of the custom navigation bar encountered some pits, specific to this tweet.

There are two mainstream ways for wechat applets to customize tabBar, the bottom navigation bar. One is to simulate switching between tabBar page and bottom navigation bar as components, but strictly speaking, this way is not suitable for complex scenes, and many page-level attributes such as life cycle cannot be used. The other is to take over the TabBar system through the micro channel small program to define the TabBar interface, which is also the implementation method of this paper, can perfectly copy the default system TabBar, but also can increase the implementation of custom functions.

Import through file copy

  1. Enter the GitHub of ColorUI and pull down all the code. There are three directories in the project, one is Colorui-UniApp, which is the uni-app version, one is the complete case version of demo, and one is the initial development version of Template. Copy the ColorUI folder from the Demo or Template folder to the project root directory.

  2. App.wxss introduces the key Css main.wxss icon.wxss.

    @import "ColorUI/main.wxss";
@import "ColorUI/icon.wxss";
Copy the code

TabBar is configured in app.json

Although it is a custom tabBar, the tabBar configuration is still required.

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index"."text": "Home page"
    }, {
      "pagePath": "pages/category/category"."text": "Classification"
    }, {
      "pagePath": "pages/cart/cart"."text": "Shopping cart"
    }, {
      "pagePath": "pages/user/user"."text": "I"}},Copy the code

TabBar “custom”: true

“Custom “: true in tabBar configuration, indicates that the tabBar is customized. The custom-tab-bar component in the project root directory takes over tabBar rendering.

"tabBar": {
	"custom": true."list": [{
      "pagePath": "pages/index/index"."text": "Home page"
    }, {
      "pagePath": "pages/category/category"."text": "Classification"
    }, {
      "pagePath": "pages/cart/cart"."text": "Shopping cart"
    }, {
      "pagePath": "pages/user/user"."text": "I"}},Copy the code

Create a custom-tab-bar component in the root directory of the project

  1. You need to create the custom-tab-bar folder in the root directory
  2. Then build the index component file in the custom-tab-bar folder

5. Introduce the ColorUI style to custom-tab-bar components

  1. Because the component needs to use the ColorUI style, but in app. WXSS introduction is not effective in custom-tab-bar component, so you need to introduce the ColorUI style file in the index. WXSS component of custom-tab-bar.
  2. Although the style of ColorUI is introduced, the custom component of wechat applet only supports the class selector, so the tabBar style at the bottom cannot be displayed completely. There will be differences in the style, so you need to adjust the style by yourself.
@import ".. /ColorUI/main.wxss";
@import ".. /ColorUI/icon.wxss";
Copy the code

6. Select the bottom navigation bar of ColorUI and introduce it

Import ColorUI dome with wechat applets, select the corresponding navigation bar from the operation bar > bottom operation bar, and copy it to the index. WXML of custom-Tab-bar component

<view class="cu-bar tabbar bg-black">
    <view class="action text-green">
      <view class="cuIcon-homefill"></view>Home page</view>
    <view class="action text-gray">
      <view class="cuIcon-similar"></view>classification</view>
    <view class="action text-gray add-action">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>release</view>
    <view class="action text-gray">
      <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
      </view>The shopping cart</view>
    <view class="action text-gray">
      <view class="cuIcon-my">
        <view class="cu-tag badge"></view>
      </view>my</view>
  </view>
Copy the code

7. Set the switching highlight at the bottom and switch the page

(1) File: custom-tab-bar/index.js
  1. First, you need to set up data
// Current highlight item
selected: 0

//tabBar page data
tabList: [{"pagePath": "pages/index/index"."text": "Home page"
	},
	{
		"pagePath": "pages/category/category"."text": "Classification"
	},
	{
		"pagePath": "pages/cart/cart"."text": "Shopping cart"
	},
	{
		"pagePath": "pages/user/user"."text": "I"}]Copy the code
  1. Set the tabBar page switch highlighting function
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}`,}}}),Copy the code
  1. Custom-tab-bar /index.js complete code
// custom-tab-bar/index.js
Component({
	properties: {},
	data: {
        // Current highlight item
		selected: 0.//tabBar page data
		tabList: [{"pagePath": "pages/index/index"."text": "Home page"
          },
          {
            "pagePath": "pages/category/category"."text": "Classification"
          },
          {
            "pagePath": "pages/cart/cart"."text": "Shopping cart"
          },
          {
            "pagePath": "pages/user/user"."text": "I"}},attached: function() {},
	methods: {
		// Bottom toggle
		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}`,})}},}})Copy the code
(2) File: custom-tab-bar/index.wxml
  1. Dynamically bound class
class="action {{selected === 0 ? 'active' : 'default'}}"
Copy the code
  1. Bind the data-index parameter to the switchTab function
<view class="cu-bar tabbar bg-black">
    <view class="action {{selected === 0 ? 'active' : 'default'}}" data-index="0" bindtap="switchTab">
      <view class="cuIcon-homefill"></view>Home page</view>
    <view class="action {{selected === 1 ? 'active' : 'default'}}" data-index="1" bindtap="switchTab">
      <view class="cuIcon-similar"></view>classification</view>
    <view class="action text-gray add-action">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>release</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>The shopping cart</view>
    <view class="action {{selected === 3 ? 'active' : 'default'}}" data-index="3" bindtap="switchTab">
      <view class="cuIcon-my">
        <view class="cu-tag badge"></view>
      </view>my</view>
</view>
Copy the code
(3) File: custom-tab-bar/index.wxss
  1. Set the default. Default style highlighting. Active style
.active{
  color: #39b54a;
}
.default{
  color: #fff;
}
Copy the code
(4) Documents:

​ pages/index/index.js

​ pages/category/category.js

​ pages/cart/cart.js

​ pages/user/user.js

  1. Set the current item to be highlighted on the tabBar page
// tabBar() needs to be called manually in the hook function
tabBar() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0})}},Copy the code
  1. Individual page code
//pages/index/index.js
// tabBar() needs to be called manually in the hook function
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0})}},//pages/category/category.js
// tabBar() needs to be called manually in the hook function
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 1})}},//pages/cart/cart.js
// tabBar() needs to be called manually in the hook function
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 2})}},//pages/user/user.js
// tabBar() needs to be called manually in the hook function
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected:3})}},Copy the code

Demo video of this article: Click browse

More front-end content welcome to pay attention to the public number: day small day personal network