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)
        }