問(wèn)題:
切換tabbar頁(yè)面時(shí),部分手機(jī)會(huì)自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面?
解決方案:(使用自定義tabbar,不使用原生的tabbar)
步驟:
1.去除app.json配置中tabBar中的item項(xiàng):
"tabBar": {
"textColor": "#000",
"selectedColor": "#f00",
"backgroundColor": "#f5f5f5"
// “item”:[...]
},
2.app.js文件中:
App({
editTabBar: function () {
var tabBar= this.globalData.tabbar;//獲取tabbar的數(shù)據(jù)賦值給tabBar
var pages = getCurrentPages();//獲取當(dāng)前頁(yè)面棧的實(shí)例,以數(shù)組形式按棧的順序給出
var currentPage = pages[pages.length - 1];
var url = '/' + currentPage .route;//獲取路徑
for (var i = 0; i < tabBar.items.length; i++) {
tabBar.items[i].active = false;//令所有的底部導(dǎo)航都是正常狀態(tài)
if (tabBar.items[i].pagePath == url) {//若是點(diǎn)擊的路徑
tabBar.items[i].active = true;//根據(jù)頁(yè)面地址設(shè)置當(dāng)前頁(yè)面狀態(tài)
}
}
//設(shè)置數(shù)據(jù)
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": "服務(wù)列表"
},
{
"pagePath": "/pages/index/index",
"icon": "/pages/images/tabbar_a3.png",
"activeIcon": "/pages/images/tabbar_b3.png",
"name": "我的"
}
],
position: "bottom"
}
},
});
3.創(chuàng)建tabbar頁(yè)面(組件), 放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.在各個(gè)tabbar頁(yè)面中引入:
//1. js文件:
var app = getApp(); //放在頂部
Page({
data: {
tabbar: { }, //放在data中
},
onLoad(){
app.editTabBar() //放在onLoad函數(shù)中
}
})
//2.axml文件中:
<import src="/pages/template/template.axml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>
//3.acss文件中:
@import "/pages/template/template.acss";