uni-app tabBar 踩坑

{ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages  { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" }
        },
        { "path": "pages/index/index0", "style": { "navigationBarTitleText": "uni-app000" // "app-plus":{ // "titleNView":{ // "buttons":[ // { // "type":"back", // "color":"#333333", // "text":"返回", // "float":"left" // } // ] // } // }  }
        },
        { "path": "pages/components/shitu", "style": { "navigationBarTitleText": "视图", "navigationBarBackgroundColor":"#333333", "navigationBarTextStyle":"white",//导航字体颜色 "enablePullDownRefresh":true,//是否下拉刷新 "navigationStyle":"default",//设置为custom导航栏消失 "app-plus": { "bounce":"none", // "animationType": "slide-in-right", // "animationDuration": 300000, "titleNView": { "titleText":"设置视图文件", "buttons":[
                            { "type":"back", "color":"#FFFFFF", "float":"left" },
                            { "type":"share", // "text":"\ue534", "colorPressed":"#c8000a", "color":"#FFFFFF", "float":"right", "badgeText":"12", "redDot":true }
                        ]
                    }
                    
                }
            }
        }
    ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar":{ "color":"#4CD964", "backgroundColor":"#333333", "fontSize":"14px", "height":"44px", "selectedColor":"#007AFF", "position":"bottom", "list":[
            { "pagePath":"pages/components/shitu", "iconPath":"static/logo.png", "selectedIconPath":"static/logo.png", "text":"组件" },
            { "pagePath":"pages/index/index", "iconPath":"static/logo.png", "selectedIconPath":"static/logo.png", "text":"API" } // , // { // "pagePath":"pages/index/index0", // "iconPath":"static/logo.png", // "selectedIconPath":"static/logo.png", // "text":"API01" // }  ]
    }
}
View Code

描述:tabBar跳转的路由 默认header 是没有返回按钮的 只有其他方式跳转的页面 会显示返回键(tabBar默认是没有上一页所以 不需要显示返回键)

  如果想显示返回键 需要 自定义 顶部导航;

bug1:自定义导航(需要在页面利用onNavigationBarButtonTap方法监听其中要注意 当前方法 与data同级)如果利用 uni.navigateTo返回(tabBar其中的路径会报错:navigateTo:fail can not navigateTo a tabbar page)需要用到uni.switchTab才可以跳转;

 onNavigationBarButtonTap(e) {
            console.log(this)
            console.log(this.$mp)
            uni.switchTab({
                url: '/pages/index/index' }) // uni.navigateBack({ // delta: 2 // }); // history.back(2) // this.$router.history.go(-1) }

 

玩咖指针 2020-09-12 14:47:52