uniApp开发笔记

1、配置tabbar

需要配置的文件：pages.json

配置代码块：

    "pages" : [ 
        // 这里是路由配置
    ],
    "tabBar": { // 这里就是配置tabbar的地方
        "color": "#8a8a8a", // 导航栏字体颜色
        "selectedColor": "#d4237a", // 选中后字体的颜色
        "borderStyle": "black", // 底部的border颜色，只能是“black”或者“white”
        "backgroundColor": "#ffffff", // 底部背景颜色
        "list": [{
                "pagePath": "pages/index/index", // 页面路径
                "text": "首页", // 底部导航文字,
                "iconPath": "static/logo.png", // 没选中前的图标路径
                "selectedIconPath": "static/logo.png" // 选中后的图标路径
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "static/logo.png",
                "selectedIconPath": "static/logo.png"
            }
        ]
    }
 

2、tabbar样式修改

修改文件：App.vue全局样式添加

    .uni-tabbar {
        // tab 样式
        // 背景色
        background-color: rgba(57, 181, 74, 0.1) !important;

        // tabBar 样式
        // 上边框
        .uni-tabbar-border {
            background-color: #e54d42 !important; // tabBar 上边框的颜色
        }

        .uni-tabbar__item {

            // tabBar 单项样式
            height: 100rpx !important;

            &:not(:last-child) {
                border-right: 4rpx solid #eee;
            }

            .uni-tabbar__icon {
                // tabBar 图标样式
                width: 40rpx !important;
                height: 40rpx !important;
            }

            .uni-tabbar__label {
                // tabBar 文字样式
                // color:yellow !important
            }
        }
    }