【底部】导航键开发

tabbar图标:

        首页、分类、购物车、我的------>选中/未选中

         应用方法:1.在static文件下创建tabbar 

                           2.在矢量图标库中找到自己需要的tabbar图标,下载-->PNG下载

                           3.将下载的tabbar图标放在项目的static文件夹中,并进行重命名

                           4.在页面下创建对应的页面

                           5.在pages.json文件下创建tabbar函数调用tabbar图标

    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
            {
            "pagePath": "pages/index/index",
            "iconPath": "static/tabbar/indx.png",
            "selectedIconPath": "static/tabbar/indexSelected.png",
            "text": "首页"
            }, 
            {
            "pagePath": "pages/list/list",
            "iconPath": "static/tabbar/list.png",
            "selectedIconPath": "static/tabbar/listSelected.png",
            "text": "分类"
            },
            {
             "pagePath": "pages/shopcart/shopcart",
             "iconPath": "static/tabbar/shop.png",
             "selectedIconPath": "static/tabbar/shopSelected.png",
             "text": "购物车"
            },
            {
              "pagePath": "pages/my/my",
              "iconPath": "static/tabbar/my.png",
              "selectedIconPath": "static/tabbar/mySelected.png",
              "text": "我的"
            }
        ]
    }

若对tabbar图标进行相应的调整参考uni-app官网 (dcloud.net.cn)

posted @ 2023-01-08 12:55  沈妙  阅读(125)  评论(0)    收藏  举报