微信小程序ColorUI自定義底部導航條TabBar - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站，軟件還是(shì)小程序，都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值，我們在(zài)追求其視覺表現的(de)同時(shí)，更側重于(yú)功能的(de)便捷，營銷的(de)便利，運營的(de)高效，讓網站成爲(wéi / wèi)營銷工具，讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持！

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序ColorUI自定義底部導航條TabBar

發表時(shí)間：2021-1-11

發布人(rén)：融晨科技

浏覽次數：318

一、項目中引入ColorUI

ColorUI其實是(shì)一套小程序的(de)CSS框架，最近使用的(de)比較多，剛好在(zài)自定義底部導航欄遇到(dào)一些坑，特有以(yǐ)此推文。

微信小程序自定義底部導航條tabBar，有兩種主流方式，一種是(shì)将TabBar頁面和(hé / huò)底部導航條作爲(wéi / wèi)組件，進行模拟切換，但是(shì)嚴格來(lái)說(shuō)這(zhè)種方式不(bù)太适用于(yú)複雜場景，很多頁面級的(de)生命周期等屬性無法使用。另外一種就(jiù)是(shì)通過微信小程序自定義TabBar接口，來(lái)實現接管系統TabBar，這(zhè)也(yě)是(shì)本文的(de)實現方法，能夠完美複刻默認系統TabBar，更可增加自定義的(de)功能實現。

一、通過文件複制引入

  1. 進入ColorUI 的(de)GitHub，拉下所有代碼，項目中有三個(gè)目錄，一個(gè)是(shì)ColorUI-UniApp這(zhè)個(gè)是(shì)uni-app版本，一個(gè)是(shì)demo完整的(de)案例版本，一個(gè)是(shì)template初始開發版本，複制demo或者template文件夾中的(de)ColorUI文件夾至項目根目錄。

  2. App.wxss 引入關鍵Css main.wxss icon.wxss 即可。

    @import "ColorUI/main.wxss";
@import "ColorUI/icon.wxss";
複制代碼

二、app.json中配置系統tabBar

雖然是(shì)自定義tabBar，但是(shì)tabBar的(de)配置還是(shì)要(yào / yāo)有。

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/category/category",
      "text": "分類"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "購物車"
    }, {
      "pagePath": "pages/user/user",
      "text": "我的(de)"
    }]
  },
複制代碼

三、app.json系統 tabBar 設置 "custom": true

tabBar配置中 "custom": true，表示自定義tabBar，由項目根目錄下的(de)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": "我的(de)"
    }]
  },
複制代碼

四、在(zài)項目根目錄新建custom-tab-bar組件

  1. 需要(yào / yāo)在(zài)根目錄建 custom-tab-bar 文件夾
  2. 再在(zài)custom-tab-bar文件夾内建index 組件文件

五、引入ColorUI樣式至custom-tab-bar組件

  1. 因爲(wéi / wèi)組件内需要(yào / yāo)使用ColorUI的(de)樣式，但是(shì)在(zài)app.wxss中引入是(shì)作用不(bù)到(dào)custom-tab-bar組件的(de)，所以(yǐ)需要(yào / yāo)在(zài)custom-tab-bar組件中index.wxss引入ColorUI樣式文件。
  2. 雖然引入ColorUI的(de)樣式，但是(shì)由于(yú)微信小程序的(de)自定義組件隻支持class選擇器，所以(yǐ)底部tabBar樣式無法完整的(de)顯示出(chū)來(lái)，樣式上(shàng)會有差别，需要(yào / yāo)自行調整樣式。
@import "../ColorUI/main.wxss";
@import "../ColorUI/icon.wxss";
複制代碼

六、選取ColorUI底部導航欄并引入

用微信小程序導入ColorUI的(de)dome在(zài)操作條>底部操作條中選取相應的(de)導航條，複制到(dào)custom-tab-bar組件的(de)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>
      我的(de)
    </view>
  </view>
複制代碼

七、設置底部切換高亮,并進行頁面切換

（1）文件：custom-tab-bar/index.js
  1. 首先需要(yào / yāo)設置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": "我的(de)"
	}
]
複制代碼
  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": "我的(de)"
          }
		]
	},
	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>
      我的(de)
    </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頁面當前項保持高亮
//需要(yào / yāo)在(zài)鈎子(zǐ)函數中手動調用  tabBar()
tabBar() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
}, 
複制代碼
  1. 各個(gè)頁面代碼
//pages/index/index.js
//需要(yào / yāo)在(zài)鈎子(zǐ)函數中手動調用  tabBar()
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
},
//pages/category/category.js
//需要(yào / yāo)在(zài)鈎子(zǐ)函數中手動調用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 1
		})
	}
},
//pages/cart/cart.js
//需要(yào / yāo)在(zài)鈎子(zǐ)函數中手動調用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 2
		})
	}
},
//pages/user/user.js
//需要(yào / yāo)在(zài)鈎子(zǐ)函數中手動調用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected:3
		})
	}
},
複制代碼


作者：天小天
來(lái)源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出(chū)處。

相關案例查看更多

相關閱讀

線上(shàng)服務咨詢

聯系

159-8711-8523

友情鏈接

© 2004-2025 JTBC(CMS) Ynkui.Com All Rights Reserved.

京ICP證000000号