今天,我在写页面的时候,碰到需要切换不同身份(两个版本)时候底部tabBar显示不同,我的解决方法是:
首先在components(组件模板)下新建一个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="tab-img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="tab-img"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
</template>
然后在app.js中
//底部导航版本1
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
});
},
//底部导航版本2
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: {
//版本1底部导航栏显示
tabBar: {
"color": "#9E9E9E",
"list": [
{
"pagePath": "/pages/student/student",
"text": "服务",
"iconPath": "../../images/fuwu.png",
"selectedIconPath": "../../images/fuwu-active.png",
"clas": "tab-item",
"selectedColor": "#4EDF80",
active: true
},
{
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "../../images/mine.png",
"selectedIconPath": "../../images/mine-active.png",
"selectedColor": "#4EDF80",
"clas": "tab-item",
active: false
}
],
"position": "bottom"
},
//版本2底部导航栏显示
tabBar1: {
"color": "#9E9E9E",
"list": [
{
"pagePath": "/pages/teacher/teacher",
"text": "服务",
"iconPath": "../../images/fuwu.png",
"selectedIconPath": "../../images/Tfuwu-active.png",
"clas": "tab-item",
"selectedColor": "#2180ed",
active: true
},
{
"pagePath": "/pages/Tmine/Tmine",
"text": "我的",
"iconPath": "../../images/mine.png",
"selectedIconPath": "../../images/Tmine-active.png",
"selectedColor": "#2180ed",
"clas": "tab-item",
active: false
}
],
"position": "bottom"
}
},
接着app.wxss
.tab-item {
padding: 0 20rpx;
text-align: center;
padding-top: 8px;
}
.tab-img {
width: 23px;
height: 23px;
display: block;
margin: auto;
}
.tab-bar {
position: fixed;
width: 100%;
background-color: #fff;
z-index: 100;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
写好了两个不同的底部导航的样式后,下一步就是在你需要页面中如何引用了。
我这里根据我的需求在四个页面中做了引用,例如:student.wxml
<!-- 引入底部导航栏 -->
<import src="../../components/tabBar.wxml" />
<template is="tabBar" data="{{tabBar}}" />
然后是在对应的js中加入两句话,这里对应的js页面是student.js,首先要记得在顶部写上var app = getApp();,然后在onload(),或者onshow()方法中添加上
onLoad: function (options) {
app.editTabBar(); //显示自定义的底部导航
},
到这里就搞定了自定义tabBar的使用了。
效果图如下:
这里要注意,如果你要引用另一个版本的底部TabBar,只需注意js中的onload()或者onshow()
好了,以上就是我的分享了,有更好的方法可以评论区告诉我。