[移动开发]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()

}