06-切换tabbar页面时,部分手机会自动跳转到登录页面(自定义tabbar)

问题:

切换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";
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。