微信小程序自定义底部导航栏，切换不同页面显示不同tabbar

    在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

    此处以两个页面（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可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。 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;
//根据页面地址设置当前页面状态 } } 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(){     //按钮的绑定事件，点击跳转至logs
wx.redirectTo({ url: '../logs/logs', }) }, onLoad: function () { } })
logs.wxml
<import src="../../template/tabbar.wxml"/> <template is="tabBar"
data="{{tabBar}}"/> 第二种样式页面 <button bindtap='toindex' size='mini'
class="button">点击切换</button>
logs.js
//logs.js var app = getApp(); Page({ data: { }, //点击按钮跳转页面 toindex: function
() { wx.redirectTo({ url: '../index/index', }) }, onLoad: function () {
//加载本页面的tabBar样式 app.editTabBar1(); } })
加载自定义tabbar的那句话（app.editTabBar）写在onload或onshow中都可以。

只写了两个主页面，其他页面可自行定义跳转。

最后放上效果图：

                 


点击切换按钮，可在两种底部导航样式的页面进行切换。本文主要为初步实现功能，样式不美观勿介意。

• « 上一篇：运维-Linux简介
• » 下一篇：csv文件格式说明