问题:
切换tabbar页面时,部分手机会自动跳转到登录页面?
解决方案:(使用自定义tabbar,不使用原生的tabbar)
步骤:
1.去除app.json配置中tabBar中的item项:
"tabBar": {
"textColor": "#000",
"selectedColor": "#f00",
"backgroundColor": "#f5f5f5"
// “item”:[...]
},
2.app.js文件中:
App({
editTabBar: function () {
var tabBar= this.globalData.tabbar;//获取tabbar的数据赋值给tabBar
var pages = getCurrentPages();//获取当前页面栈的实例,以数组形式按栈的顺序给出
var currentPage = pages[pages.length - 1];
var url = '/' + currentPage .route;//获取路径
for (var i = 0; i < tabBar.items.length; i++) {
tabBar.items[i].active = false;//令所有的底部导航都是正常状态
if (tabBar.items[i].pagePath == url) {//若是点击的路径
tabBar.items[i].active = true;//根据页面地址设置当前页面状态
}
}
//设置数据
currentPage.setData({
tabbar:tabBar
});
},
globalData: {
//配置tabbar
tabbar: {
textColor: "#333",
selectedColor: "#d0501f",
backgroundColor: "#ffffff",
borderStyle: "#d5d5d5",
"items": [
{
"pagePath": "/pages/usetype/usetype",
"icon": "/pages/images/tabbar_a1.png",
"activeIcon": "/pages/images/tabbar_b1.png",
"name": "一键用券"
},
{
"pagePath": "/pages/networklist/networklist",
"icon": "/pages/images/tabbar_a2.png",
"activeIcon": "/pages/images/tabbar_b2.png",
"name": "服务列表"
},
{
"pagePath": "/pages/index/index",
"icon": "/pages/images/tabbar_a3.png",
"activeIcon": "/pages/images/tabbar_b3.png",
"name": "我的"
}
],
position: "bottom"
}
},
});
3.创建tabbar页面(组件), 放pages里就行
(只需配置axml和acss)
//1.template.axml
<template name="tabbar">
<view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
<navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.items.length*100}}%; color:{{item.active?tabbar.selectedColor:tabbar.textColor}}" url="{{item.pagePath}}" a:for="{{tabbar.items}}" a:key="index">
<image class="tabbar_icon" src="{{item.active?item.activeIcon:item.icon}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
</template>
//2.template.acss
.tabbar_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100rpx;
border-top: 0.5rpx solid #d5d5d5;
}
.tabbar_nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 25rpx;
height: 100%;
}
.tabbar_icon {
width: 40rpx;
height: 40rpx;
}
4.在各个tabbar页面中引入:
//1. js文件:
var app = getApp(); //放在顶部
Page({
data: {
tabbar: { }, //放在data中
},
onLoad(){
app.editTabBar() //放在onLoad函数中
}
})
//2.axml文件中:
<import src="/pages/template/template.axml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>
//3.acss文件中:
@import "/pages/template/template.acss";