uni-app小程序fixed定位自定义tabBar

pages.json里配置好tabBar

"tabBar": {
        "color": "#fff",
        "selectedColor": "#f00",
        "borderStyle": "black",
        "backgroundColor": "#000",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/images/tab_home_nor.png",
                "selectedIconPath": "static/images/tab_home_sel.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/images/tab_me_nor.png",
                "selectedIconPath": "static/images/tab_me_sel.png"
            }
        ],

}

哪个页面需要tabbar就写上如下代码

页面跳转的 open-type="switchTab"

<view class="tabbar-box row acenter">
            <navigator class="btn column acenter jcenter" open-type="switchTab" url="/pages/index/index">
                <image class="icon" src="@/static/images/tab_home_sel.png"></image>
                <text>首页</text>
            </navigator>    
            <navigator class="btn column acenter jcenter" open-type="switchTab" url="/pages/friend/friend">
                <image class="icon" src="@/static/images/tab_my_nor.png"></image>
                <text class="fontS10 font-grey">我的</text>
            </navigator>
</view>

css样式如下

.tabbar-box {

        position: fixed;
        bottom:0;

        left:0;
        z-index:20000;
        width:100%;
        height:100rpx;
        border-top:#eee solid 2rpx;
        background: #fff;

}

.tabbar-box .btn{

        width:25%;

}

.icon{

        width:50rpx;

        height:50rpx;

}

重点：页面中记得隐藏tabbar 

onShow() {

        uni.hideTabBar()

}