06-切換tabbar頁(yè)面時(shí),部分手機(jī)會(huì)自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面(自定義tabbar)

問(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";
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容