在一個微信小程序中想要用到兩種不同的tabbar樣式眼姐，需要在app.js中自定義，在頁面加載時進行調(diào)用佩番。
比如一個小程序需要兩個版本（用戶版众旗、商家版），并且能通過一個按鈕在兩個版本間進行切換趟畏，可能會用到這種方式贡歧。
此處以兩個頁面（index，logs）顯示兩種tabbar樣式為例赋秀，通過切換按鈕進行切換利朵。
首先有一個模板文件：tabbar.wxml
<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>{{item.text}}</text>
</navigator>
</block>
<view class="clear"></view>
</view>
</template>
在app.json中無需定義“tabBar”
在app.js中自定義如下
//app.js
App({
onLaunch: function () {
},
//第一種底部
editTabBar: function () {
//使用getCurrentPages可以獲取當前加載中所有的頁面對象的一個數(shù)組，數(shù)組最后一個就是當前頁面猎莲。
var curPageArr = getCurrentPages(); //獲取加載的頁面
var curPage = curPageArr[curPageArr.length - 1]; //獲取當前頁面的對象
var pagePath = curPage.route; //當前頁面url
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ù)頁面地址設置當前頁面狀態(tài)
}
}
curPage.setData({
tabBar: tabBar
});
},
//第二種底部绍弟，原理同上
editTabBar1: function () {
var curPageArr = getCurrentPages();
var curPage = curPageArr[curPageArr.length - 1];
var pagePath = curPage.route;
if (pagePath.indexOf('/') != 0) {
pagePath = '/' + pagePath;
}
var tabBar = this.globalData.tabBar1;
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;
}
}
curPage.setData({
tabBar: tabBar
});
},
globalData: {
//第一種底部導航欄顯示
tabBar: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "職位",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"clas": "menu-item",
"selectedColor": "#4EDF80",
active: true
},
{
"pagePath": "/pages/logs/logs",
"text": "簡歷",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"selectedColor": "#4EDF80",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/test/test",
"text": "我的",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"selectedColor": "#4EDF80",
"clas": "menu-item",
active: false
}
],
"position": "bottom"
},
//第二種底部導航欄顯示
tabBar1: {
"color": "#9E9E9E",
"selectedColor": "#f00",
"backgroundColor": "#fff",
"borderStyle": "#ccc",
"list": [
{
"pagePath": "/pages/index/index",
"text": "首頁",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"clas": "menu-item1",
"selectedColor": "#4EDF80",
active: false
},
{
"pagePath": "/pages/logs/logs",
"text": "消息",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"selectedColor": "#4EDF80",
"clas": "menu-item1",
active: true
},
{
"pagePath": "/pages/cont/index",
"text": "簡歷",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"selectedColor": "#4EDF80",
"clas": "menu-item1",
active: false
},
{
"pagePath": "/pages/detail/index",
"text": "我的",
"iconPath": "/images/my.png",
"selectedIconPath": "/images/my.png",
"selectedColor": "#4EDF80",
"clas": "menu-item1",
active: false
}
],
"position": "bottom"
}
}
})
在app.wxss中定義顯示樣式
.menu-item{
width: 32%;
float: left;
text-align: center;
padding-top: 8px;
}
.menu-item1{
width: 24%;
float: left;
text-align: center;
padding-top: 8px;
}
.img{
width: 23px;
height: 23px;
display: block;
margin:auto;
}
.clear{
clear: both;
}
.tab-bar{
position: fixed;
width: 100%;
padding: 0px 2%;
}
.button{
margin: 130px;
}
index.wxml，用到自定義tabbar的頁面的首部都需要引入模板文件
<import src="../../template/tabbar.wxml"/>
<template is="tabBar" data="{{tabBar}}"/>
第一種底部導航欄樣式的頁面
<button bindtap='tologs' size='mini' class="button">點擊切換</button>
index.js
//index.js
var app = getApp();
Page({
data: {
},
onShow:function(){
app.editTabBar(); //顯示自定義的底部導航
},
tologs:function(){ //按鈕的綁定事件著洼，點擊跳轉(zhuǎn)至logs
wx.redirectTo({
url: '../logs/logs',
})
},
onLoad: function () {
}
})
logs.js
//logs.js
var app = getApp();
Page({
data: {
},
//點擊按鈕跳轉(zhuǎn)頁面
toindex: function () {
wx.redirectTo({
url: '../index/index',
})
},
onLoad: function () {
//加載本頁面的tabBar樣式
app.editTabBar1();
}
})
加載自定義tabbar的那句話（app.editTabBar）寫在onload或onshow中都可以樟遣。
只寫了兩個主頁面，其他頁面可自行定義跳轉(zhuǎn)郭脂。
最后放上效果圖：
tabbar1
tabbar2
