最近做项目的时候，突然来了个小特殊的需求，根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了，这个不是小程序自带的组件么？还要做成动态？这就有点尴尬了.....
不过也只是一时尴尬而已，然后我就展开了搜索之旅.....然后发现，官方的组件确实没办法做动态，那咋办，如果真的有这个需求那也是得去处理滴呀~然后也看了有一些做到这效果的方法，那就试一下呗。。其实就是自定义个tabBar的模板，以下是实现：
首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。
TIM图片20171128141629.png
然后新建个tabBar.wxml文件，这里就写下你的tabBar的结构。
<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的部分，由于是底部的导航，那肯定是不止一个页面用到的，那这里就可以写在全局的app.js里面方便使用。这里我写了两种tabBar的模板，分别对应来显示
//app.js
App({
onLaunch: function () {
// // 展示本地存储能力
// var logs = wx.getStorageSync('logs') || []
// logs.unshift(Date.now())
// wx.setStorageSync('logs', logs)
},
//第一种状态的底部
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": "/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": "首页",
"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"
}
}
})
然后在需要用到这个组件的页面上直接调用。比如这里的index页面。
<!--index.wxml-->
<import src="../template/tabbar.wxml"/>
首页
<template is="tabBar" data="{{tabBar:tabBar}}"></template>
image.png
然后去index.js里面调用tabBar
image.png
然后下面是效果图。
image.png
就这些。我个人觉得这个自定义导航的用户体验不是很好，能不用就不要用，不过知道下方法也是ok滴！如有发现有错或者不足的地方可以指出，谢谢！
