欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序ColorUI自定義底部導(dǎo)航條TabBar - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序ColorUI自定義底部導(dǎo)航條TabBar

發(fā)表時間：2021-1-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：318

一、項(xiàng)目中引入ColorUI

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

微信小程序自定義底部導(dǎo)航條tabBar，有兩種主流方式，一種是將TabBar頁面和底部導(dǎo)航條作為組件，進(jìn)行模擬切換，但是嚴(yán)格來說這種方式不太適用于復(fù)雜場景，很多頁面級的生命周期等屬性無法使用。另外一種就是通過微信小程序自定義TabBar接口，來實(shí)現(xiàn)接管系統(tǒng)TabBar，這也是本文的實(shí)現(xiàn)方法，能夠完美復(fù)刻默認(rèn)系統(tǒng)TabBar，更可增加自定義的功能實(shí)現(xiàn)。

一、通過文件復(fù)制引入

  1. 進(jìn)入ColorUI 的GitHub，拉下所有代碼，項(xiàng)目中有三個目錄，一個是ColorUI-UniApp這個是uni-app版本，一個是demo完整的案例版本，一個是template初始開發(fā)版本，復(fù)制demo或者template文件夾中的ColorUI文件夾至項(xiàng)目根目錄。

  2. App.wxss 引入關(guān)鍵Css main.wxss icon.wxss 即可。

    @import "ColorUI/main.wxss";
@import "ColorUI/icon.wxss";
復(fù)制代碼

二、app.json中配置系統(tǒng)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": "我的"
    }]
  },
復(fù)制代碼

三、app.json系統(tǒng) tabBar 設(shè)置 "custom": true

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

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

  1. 需要在根目錄建 custom-tab-bar 文件夾
  2. 再在custom-tab-bar文件夾內(nèi)建index 組件文件

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

  1. 因?yàn)榻M件內(nèi)需要使用ColorUI的樣式，但是在app.wxss中引入是作用不到custom-tab-bar組件的，所以需要在custom-tab-bar組件中index.wxss引入ColorUI樣式文件。
  2. 雖然引入ColorUI的樣式，但是由于微信小程序的自定義組件只支持class選擇器，所以底部tabBar樣式無法完整的顯示出來，樣式上會有差別，需要自行調(diào)整樣式。
@import "../ColorUI/main.wxss";
@import "../ColorUI/icon.wxss";
復(fù)制代碼

六、選取ColorUI底部導(dǎo)航欄并引入

用微信小程序?qū)隒olorUI的dome在操作條>底部操作條中選取相應(yīng)的導(dǎo)航條，復(fù)制到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>
      發(fā)布
    </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>
復(fù)制代碼

七、設(shè)置底部切換高亮,并進(jìn)行頁面切換

（1）文件：custom-tab-bar/index.js
  1. 首先需要設(shè)置data
//當(dāng)前高亮項(xiàng)
selected: 0

//tabBar頁面數(shù)據(jù)
tabList: [
	{
		"pagePath": "pages/index/index",
		"text": "首頁"
	},
	{
		"pagePath": "pages/category/category",
		"text": "分類"
	},
	{
		"pagePath": "pages/cart/cart",
		"text": "購物車"
	},
	{
		"pagePath": "pages/user/user",
		"text": "我的"
	}
]
復(fù)制代碼
  1. 設(shè)置tabBar頁面切換高亮函數(shù)
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}`,
     })
    }
},
復(fù)制代碼
  1. custom-tab-bar/index.js完整代碼
// custom-tab-bar/index.js
Component({
	properties: {},
	data: {
        //當(dāng)前高亮項(xiàng)
		selected: 0,
        //tabBar頁面數(shù)據(jù)
		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}`,
				})
			}
		},
	}
})
復(fù)制代碼
（2）文件：custom-tab-bar/index.wxml
  1. 動態(tài)綁定class
class="action {{selected === 0 ? 'active' : 'default'}}"
復(fù)制代碼
  1. 綁定data-index參數(shù)，綁定switchTab函數(shù)
<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>
      發(fā)布
    </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>
復(fù)制代碼
（3）文件：custom-tab-bar/index.wxss
  1. 設(shè)置 默認(rèn).default樣式 高亮 .active樣式
.active{
  color: #39b54a;
}
.default{
  color: #fff;
}
復(fù)制代碼
（4）文件：

? pages/index/index.js

? pages/category/category.js

? pages/cart/cart.js

? pages/user/user.js

  1. 設(shè)置給tabBar頁面當(dāng)前項(xiàng)保持高亮
//需要在鉤子函數(shù)中手動調(diào)用  tabBar()
tabBar() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
}, 
復(fù)制代碼
  1. 各個頁面代碼
//pages/index/index.js
//需要在鉤子函數(shù)中手動調(diào)用  tabBar()
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
},
//pages/category/category.js
//需要在鉤子函數(shù)中手動調(diào)用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 1
		})
	}
},
//pages/cart/cart.js
//需要在鉤子函數(shù)中手動調(diào)用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 2
		})
	}
},
//pages/user/user.js
//需要在鉤子函數(shù)中手動調(diào)用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected:3
		})
	}
},
復(fù)制代碼


作者：天小天
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

相關(guān)案例查看更多