微信小程序如何实现自定义tabBar-原创手记-慕课网

　　小程序开发现在非常火，但是对于后台来说如何做到自定义tabBar呢?下面就来讲解下，如何实现微信小程序登录后根据用户身份权限不同跳转到不同的页面问题。首先需要解决的是：你要把底部导航做成一个公共模板template。
wxml中代码：<template name="tabBar">
<view class="tab-bar" >
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" >
<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中，这样就设置完毕了，相信现在大家都知道如何来实现了，如果还存在疑问的话，大家可以、留言，来共同讨论学习。