1.因为产品相关的的权限，需要配置不同的导航，这时候需要自定义导航。分离出来的就是一个小的组件。（tabBar.vue）
此处暂时用的html插入的代码，能粘贴到vue文件即可。
<template>
<view class="tabBar">
<view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{‘active‘:item.url == currentPage}"
@click="navTo(item,index)">
<image v-if="item.url == currentPage" :src="item.imgClick" mode=""></image>
<image v-else :src="item.imgNormal" mode=""></image>
<view class="text">{{item.text}}</view>
</view>
</view>
</template>
<script>
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() */
}
}
}
}
</script>
<style lang="scss" scoped>
//导航栏设置
$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;
}
}
</style>
2、页面引入。