美文网首页
App底部导航栏

App底部导航栏

作者: 高磊_IT | 来源:发表于2020-08-16 08:26 被阅读0次

写过小程序的同学会发现,导航栏的配置跟小程序配置一样的。

pages.json页面

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "水达"
            }
        }, {
            "path": "pages/list/list",
            "style": {}
        }, {
            "path": "pages/myCenter/myCenter",
            "style": {}
        }, {
            "path": "pages/shopCar/shopCar",
            "style": {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "水达",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "color": "#636263",
        "selectedColor": "#636263",
        "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "static/tabbar/index.png",
                "selectedIconPath": "static/tabbar/indexSelected.png",
                "text": "首页"
            }, {
                "pagePath": "pages/list/list",
                "iconPath": "static/tabbar/list.png",
                "selectedIconPath": "static/tabbar/listSelected.png",
                "text": "分类"
            },
            {
                "pagePath": "pages/shopCar/shopCar",
                "iconPath": "static/tabbar/shop.png",
                "selectedIconPath": "static/tabbar/shopSelected.png",
                "text": "购物车"
            },
            {
                "pagePath": "pages/myCenter/myCenter",
                "iconPath": "static/tabbar/my.png",
                "selectedIconPath": "static/tabbar/mySelected.png",
                "text": "我的"
            }
        ]
    }
}

相关文章

网友评论

      本文标题:App底部导航栏

      本文链接:https://www.haomeiwen.com/subject/iloadktx.html