在一个微信小程序中想要用到两种不同的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中都可以。
只写了两个主页面,其他页面可自行定义跳转。
最后放上效果图:
点击切换按钮,可在两种底部导航样式的页面进行切换。本文主要为初步实现功能,样式不美观勿介意。