1、将pages.json
中的tabBar
的list
设置为空数组,即不再使用默认系统自带的tabBar
组件。
2、创建tabBar.vue
组件,组件内的代码内容如下。
<template>
<view class="tab-bar">
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
selectedIndex: { // 当前选中的tab index
default: 0
},
},
data() {
return {
color: "#666666",
selectedColor: "#f0c786",
list: [{
"pagePath": "/pages/index/home/index",
"text": "首页",
"iconPath": "/static/tabbar/tab_home.png",
"selectedIconPath": "/static/tabbar/tab_home_sel.png"
}, {
"pagePath": "/pages/index/type",
"text": "货品",
"iconPath": "/static/tabbar/tab_type.png",
"selectedIconPath": "/static/tabbar/tab_type_sel.png"
}, {
"pagePath": "/pages/index/myself/index",
"text": "我的",
"iconPath": "/static/tabbar/tab_my.png",
"selectedIconPath": "/static/tabbar/tab_my_sel.png"
}],
currentIndex: 0,
}
},
created() {
this.currentIndex = this.selectedIndex;
if (uni.getStorageSync('login7') == 1) {
this.list.unshift({
"pagePath": "/pages/index/cart",
"text": "收银",
"iconPath": "/static/tabbar/tab_cart.png",
"selectedIconPath": "/static/tabbar/tab_cart_sel.png"
}, {
"pagePath": "/pages/index/vip",
"text": "会员",
"iconPath": "/static/tabbar/tab_vip.png",
"selectedIconPath": "/static/tabbar/tab_vip_sel.png"
})
} else {
this.list = [{
"pagePath": "/pages/index/home/index",
"text": "首页",
"iconPath": "/static/tabbar/tab_home.png",
"selectedIconPath": "/static/tabbar/tab_home_sel.png"
}, {
"pagePath": "/pages/index/type",
"text": "货品",
"iconPath": "/static/tabbar/tab_type.png",
"selectedIconPath": "/static/tabbar/tab_type_sel.png"
}, {
"pagePath": "/pages/index/myself/index",
"text": "我的",
"iconPath": "/static/tabbar/tab_my.png",
"selectedIconPath": "/static/tabbar/tab_my_sel.png"
}]
}
},
methods: {
switchTab(item, index) {
this.currentIndex = index;
let url = item.pagePath;
uni.redirectTo({
url: url
})
}
}
}
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
z-index: 999;
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 20rpx;
margin-top: 9rpx;
}
}
}
</style>
3、在main.js
文件中将自定义的tabBar
定义为全局组件。
import tabBar from "components/tabBar/tabBar.vue"
Vue.component('tabBar',tabBar)
4、在每一个原本将要设置为tabBar
的子页面添加我们自定义的tabBar
组件。
5、登录页面中成功登录以后根据相关字段控制切换相关逻辑。