zoukankan      html  css  js  c++  java
  • 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)
            }
  • 相关阅读:
    Servlet(九):web.xml文件和server.xml文件
    Servlet(八):ServletContext对象和ServletConfig对象
    Servlet(七):session
    Servlet(六):Cookie
    Servlet(五):请求转发和重定向
    Servlet(四):request和response对象
    Servlet(三):生命周期、常用方法、常见错误
    【php】在Windows2003下的IIS配置php5.4
    Spring AOP监控SQL运行
    算法导论—无向图的遍历(BFS+DFS,MATLAB)
  • 原文地址:https://www.cnblogs.com/lst619247/p/11867235.html
Copyright © 2011-2022 走看看