首先 components中 新建一个自定义组件
组件中编写
<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>
页面引入
<template>
<view class="shop-index" >
<view class="container">
<tabBar :currentPage="currentPage"></tabBar>
</view>
</view>
</template>
引入自定义组件
<script>
import tabBar from '../../components/page-tabBar.vue'
</script>