小程序開發現在非常火，但是對於後臺來說如何做到自定義tabBar呢?下面就來講解下，如何實現微信小程序登錄後根據用戶身份權限不同跳轉到不同的頁面問題。首先需要解決的是：你要把底部導航做成一個公共模板template。
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 class='tabbar_text'>{{item.text}}</text>
</navigator>
</block>
<view class="clear"></view>
</view>
</template>
因爲它要全局調用我就把樣式寫在
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
}
app.js中代碼如下：
App({
onLaunch: function () {
},
//第一種狀態的底部
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;//根據頁面地址設置當前頁面狀態
}
}
_curPage.setData({
tabBar: tabBar
});
},
//第二種狀態的底部
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;//根據頁面地址設置當前頁面狀態
}
}
_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": "首頁",
"iconPath": "/image/s.png",
"selectedIconPath": "/image/s.png",
"clas": "menu-item",
"selectedColor": "#4665f9",
active: true
},
{
"pagePath": "/pages/log/index",
"text": "日誌",
"iconPath": "/image/s.png",
"selectedIconPath": "/image/s.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": "首頁",
"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"
}
}
})
初步工作準備完畢，接下來就是要去調用這個模板了，首先要在需要添加tabBar的wxml頁面中添加，接下來就是js中，這樣就設置完畢了，相信現在大家都知道如何來實現了，如果還存在疑問的話，大家可以、留言，來共同討論學習。
本文由專業的鄭州app開發公司燚軒科技整理髮布，如需轉載請註明出處。