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、页面引入。