012 配置tabBar导航菜单与opentype跳转差异

最新推荐文章于 2025-08-02 16:21:59 发布

懂营养的程序员

最新推荐文章于 2025-08-02 16:21:59 发布

阅读量413

点赞数 12

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/KevinHuang2088/article/details/144486909

06 uni-app with vue2 专栏收录该内容

30 篇文章

订阅专栏

iconfont-阿里巴巴矢量图标库

pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path" : "pages/list/list",
            "style" : 
            {
                "navigationBarTitleText" : "新闻列表",
                "navigationBarBackgroundColor": "#5ada66",
                "navigationBarTextStyle": "white"
            }
        },
        {
            "path" : "pages/about/about",
            "style" : 
            {
                "navigationBarTitleText" : "关于我们"
            }
        }
    ],
    
    // 如果pages中没有设置，那么使用此全局设置
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {},
    
    "tabBar": {
        "color": "#333",
        "selectedColor": "#15FF9",
        "list": [
            {
                "text": "首页",
                "pagePath": "pages/index/index",
                "iconPath": "static/images/tabbar/home.png",
                "selectedIconPath": "static/images/tabbar/home-h.png"
            },
            {
                "text": "列表",
                "pagePath": "pages/list/list",
                "iconPath": "static/images/tabbar/list.png",
                "selectedIconPath": "static/images/tabbar/list-h.png"
            },
            {
                "text": "我们",
                "pagePath": "pages/about/about",
                "iconPath": "static/images/tabbar/user.png",
                "selectedIconPath": "static/images/tabbar/user-h.png"
            }
        ]
    }
}

index.vue

<view>
      <navigator url="/pages/list/list" open-type="reLaunch">新闻列表</navigator>
      <navigator url="/pages/about/about">关于我们</navigator>
      <navigator url="/pages/list/list">
          <image src="../../static/images/pic2.jpg"></image>
      </navigator>
</view>