最近做項(xiàng)目的時(shí)候，突然來了個(gè)小特殊的需求崖疤，根據(jù)客戶的類型來動(dòng)態(tài)顯示底部的tabBar菜單嗜闻。當(dāng)時(shí)我就有點(diǎn)小懵逼了蜕依，這個(gè)不是小程序自帶的組件么？還要做成動(dòng)態(tài)琉雳？這就有點(diǎn)尷尬了.....
不過也只是一時(shí)尷尬而已样眠，然后我就展開了搜索之旅.....然后發(fā)現(xiàn)，官方的組件確實(shí)沒辦法做動(dòng)態(tài)翠肘，那咋辦檐束，如果真的有這個(gè)需求那也是得去處理滴呀~然后也看了有一些做到這效果的方法，那就試一下唄束倍。被丧。其實(shí)就是自定義個(gè)tabBar的模板，以下是實(shí)現(xiàn)：
首先绪妹，既然是說自定義組件甥桂，那是用到template了。那先在Page里新建個(gè)template的文件夾邮旷，以便放tabBar的組件黄选。
TIM圖片20171128141629.png
然后新建個(gè)tabBar.wxml文件，這里就寫下你的tabBar的結(jié)構(gòu)廊移。
<template name="tabBar">
<view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
<text class='tabbar_text'>{{item.text}}</text>
</navigator>
</block>
<view class="clear"></view>
</view>
</template>
下面是tabBar所需要用到的樣式糕簿，我這里就直接寫在全局app.wxss了。
.menu-item{
width: 32%;
float: left;
text-align: center;
padding-top: 8px;
}
.menu-item2{
width: 24%;
float: left;
text-align: center;
padding-top: 8px;
}
.img{
width: 30rpx;
height: 30rpx;
display: block;
margin:auto;
}
.clear{
clear: both;
}
.tab-bar{
position: fixed;
width: 100%;
padding: 0px 2%;
}
.tabbar_text{
font-size: 28rpx
}
然后接下來是js的部分狡孔，由于是底部的導(dǎo)航，那肯定是不止一個(gè)頁(yè)面用到的蜂嗽，那這里就可以寫在全局的app.js里面方便使用苗膝。這里我寫了兩種tabBar的模板，分別對(duì)應(yīng)來顯示
//app.js
App({
onLaunch: function () {
// // 展示本地存儲(chǔ)能力
// var logs = wx.getStorageSync('logs') || []
// logs.unshift(Date.now())
// wx.setStorageSync('logs', logs)
},
//第一種狀態(tài)的底部
editTabBar: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
if (_pagePath.indexOf('/') != 0) {
_pagePath = '/' + _pagePath;
}
var tabBar = this.globalData.tabBar;
for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false;
if (tabBar.list[i].pagePath == _pagePath) {
tabBar.list[i].active = true;//根據(jù)頁(yè)面地址設(shè)置當(dāng)前頁(yè)面狀態(tài)
}
}
_curPage.setData({
tabBar: tabBar
});
},
//第二種狀態(tài)的底部
editTabBar2: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
if (_pagePath.indexOf('/') != 0) {
_pagePath = '/' + _pagePath;
}
var tabBar = this.globalData.tabBar2;
for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false;
if (tabBar.list[i].pagePath == _pagePath) {
tabBar.list[i].active = true;//根據(jù)頁(yè)面地址設(shè)置當(dāng)前頁(yè)面狀態(tài)
}
}
_curPage.setData({
tabBar: tabBar
});
},
globalData: {
userInfo: null,
pop:2,
num:0,
tabBar: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "首頁(yè)",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"clas": "menu-item",
"selectedColor": "#4665f9",
active: true
},
{
"pagePath": "/pages/log/index",
"text": "日志",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"selectedColor": "#4665f9",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/my/index",
"text": "我的",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"selectedColor": "#4665f9",
"clas": "menu-item",
active: false
}
],
"position": "bottom"
},
tabBar2: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "首頁(yè)",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"clas": "menu-item2",
"selectedColor": "#4665f9",
active: true
},
{
"pagePath": "/pages/log/index",
"text": "日志",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"selectedColor": "#4665f9",
"clas": "menu-item2",
active: false
},
{
"pagePath": "/pages/my/index",
"text": "我的",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"selectedColor": "#4665f9",
"clas": "menu-item2",
active: false
},
{
"pagePath": "/pages/new/index",
"text": "新的",
"iconPath": "/img/home.png",
"selectedIconPath": "/img/home_on.png",
"selectedColor": "#4665f9",
"clas": "menu-item2",
active: false
}
],
"position": "bottom"
}
}
})
然后在需要用到這個(gè)組件的頁(yè)面上直接調(diào)用植旧。比如這里的index頁(yè)面辱揭。
<!--index.wxml-->
<import src="../template/tabbar.wxml"/>
首頁(yè)
<template is="tabBar" data="{{tabBar:tabBar}}"></template>
image.png
然后去index.js里面調(diào)用tabBar
image.png
然后下面是效果圖。
image.png
就這些病附。我個(gè)人覺得這個(gè)自定義導(dǎo)航的用戶體驗(yàn)不是很好问窃，能不用就不要用，不過知道下方法也是ok滴完沪！如有發(fā)現(xiàn)有錯(cuò)或者不足的地方可以指出域庇，謝謝嵌戈！
