微信小程序，不同身份登录不同的底部导航栏。初次遇到这个问题，菜鸟的我没有一丝丝头绪，看了几篇博客后，终于明白了。下面是总结的模板，拿去直接用就欧克。
比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。
此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。
首先建一个template的文件夹，然后写入下面内容。写一个模板文件：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可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。var curPageArr = getCurrentPages(); //获取加载的页面var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象var pagePath = curPage.route; //当前页面urlif (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});},//第二种底部，原理同上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;}
/
接下来就是要去调用这个模板了，首先要在需要添加tabBar的wxml页面中添加，接下来就是js中，这样就设置完毕了，相信现在大家都知道如何来实现了//
下面是给出的小例子
index.wxml，用到自定义tabbar的页面的首部都需要引入模板文件
商家登录界面的登录按钮
<button bindtap='tologs' size='mini' class="button">点击切换</button>
商家进入的首页
<import src="../../template/tabbar.wxml"/>
<template is="tabBar" data="{{tabBar}}"/>
index.js
//index.js
var app = getApp();
Page({
data: {
},
onShow:function(){
app.editTabBar(); //显示自定义的底部导航
},
tologs:function(){ //按钮的绑定事件，点击跳转至logs
wx.redirectTo({
url: '../logs/logs',
})
},
onLoad: function () {
}
})
logs.wxml
用户顾客登录界面
<button bindtap='toindex' size='mini' class="button">点击切换</button>
用户顾客进入的首页
<import src="../../template/tabbar.wxml"/>
<template is="tabBar" data="{{tabBar}}"/>
logs.js
//logs.js
var app = getApp();
Page({
data: {
},
//点击按钮跳转页面
toindex: function () {
wx.redirectTo({
url: '../index/index',
})
},
onLoad: function () {
//加载本页面的tabBar样式
app.editTabBar1();
}
})
参考的博客：
微信小程序自定义底部导航栏，切换不同页面显示不同tabbar_small_lack的博客-CSDN博客_微信小程序底部导航自定义
微信小程序如何实现自定义tabBar_燚轩软件科技-CSDN博客_小程序如何自定义tabbar
