uni-app中如何配置tabbar效果

一、效果如下:

二、准备好tabbar所需要的4组UI图标

三、修改项目更根目录中的pages.json配置文件,新增tabbar的配置节点如下:

源码:

"tabBar": {
        "selectedColor": "#fb6e03",
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "static/tab_icons/home.png",
                "selectedIconPath": "static/tab_icons/home-active.png"
            },
            {
                "pagePath": "pages/cate/cate",
                "text": "分类",
                "iconPath": "static/tab_icons/cate.png",
                "selectedIconPath": "static/tab_icons/cate-active.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "static/tab_icons/cart.png",
                "selectedIconPath": "static/tab_icons/cart-active.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/tab_icons/my.png",
                "selectedIconPath": "static/tab_icons/my-active.png"
            }
        ]
    }

猜你喜欢

转载自blog.csdn.net/cui137610/article/details/143000193