uniapptabbar的高度是多少_uni-app之tabBar的自己配置

1.因为产品相关的的权限，需要配置不同的导航，这时候需要自定义导航。分离出来的就是一个小的组件。(tabBar.vue)

此处暂时用的html插入的代码，能粘贴到vue文件即可。

@click="navTo(item,index)">

{{item.text}}

export default {

props: {

currentPage: {

type: String,

default: 'index'

}

},

data() {

return {

tabBar: [{

url: 'information',

text: '消息',

imgNormal:'../../static/images/information.png',

imgClick:'../../static/images/active/information_active.png'

},

{

url: 'officialPartner',

text: '合作商',

imgNormal:'../../static/images/officialPartner.png',

imgClick:'../../static/images/active/offPartner_active.png'

},

{

url: 'stock',

text: '库存',

imgNormal:'../../static/images/stock.png',

imgClick:'../../static/images/active/stock_active.png'

}, {

url: 'product',

text: '产品',

imgNormal:'../../static/images/product.png',

imgClick:'../../static/images/active/product_active.png'

}, {

url: 'mine',

text: '我的',

imgNormal:'../../static/images/mine.png',

imgClick:'../../static/images/active/mine_active.png'

}

],

level:''

};

},mounted(){

let userlevel = uni.getStorageSync('level');

/* console.log(userlevel); */

let _this = this;

if (userlevel== 1) {

_this.tabBar.splice(3, 1);

} else {

_this.tabBar.splice(1,1);

_this.tabBar.splice(1,1);

}

},

created() {

uni.hideTabBar({})

},

computed: {

},

methods: {

navTo(item,index) {

let _this = this;

if (item.url !== _this.currentPage) {

var isUrl = `/pages/${item.url}/${item.url}`

const that = this

uni.switchTab({

url: isUrl

})

} else {

/* this.$parent.toTop() */

}

}

}

}

//导航栏设置

$isRadius:20upx; //左上右上圆角

$isWidth:100vw; //导航栏宽度

$isBorder:1px solid #eeeeee; //边框 不需要则设为0px

$isBg:white; //背景

// 选中设置

$chooseTextColor:#1b60ac; //选中时字体颜色

$chooseBgColor:white; //选中时背景颜色 transparent为透明

//未选中设置

$normalTextColor:#999; //未选中颜色

.tabBar {

width: $isWidth;

height: 100upx;

position: fixed;

bottom: 10upx;

left: 0;

right: 0;

margin: 0 auto;

z-index: 998;

background-color: $isBg;

color: $normalTextColor;

border-left: $isBorder;

border-top: $isBorder;

border-right: $isBorder;

display: flex;

justify-content: space-around;

border-top-right-radius: $isRadius;

border-top-left-radius: $isRadius;

box-sizing: border-box;

overflow: hidden;

.tabbar_item {

width: 25%;

font-size: 12px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

&.active {

/* border-left: $isBorder;

border-top: $isBorder; */

background: $chooseBgColor;

color: $chooseTextColor;

}

}

image {

width: 36upx;

height: 36upx;

margin-left: 5upx;

}

}

2、页面引入。