You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.8 KiB
131 lines
3.8 KiB
<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="name == item.text ? item.selectedIconPath : item.iconPath"></image>
|
|
<view class="tab_text" :style="{color: name == item.text ? selectedColor : color}">{{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
name: { // 当前选中的tab index
|
|
default: 0
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
color: "#999",
|
|
selectedColor: "#218DFF",
|
|
list: [],
|
|
currentIndex:0,
|
|
}
|
|
},
|
|
watch: {
|
|
identity(newVal) {
|
|
this.initTabbar()
|
|
}
|
|
},
|
|
created() {
|
|
this.currentName = this.name;
|
|
this.initTabbar()
|
|
},
|
|
methods: {
|
|
switchTab(item, index) {
|
|
this.currentName = item.text;
|
|
|
|
let url = item.pagePath;
|
|
console.log(url)
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
// uni.reLaunch({url:url})
|
|
},
|
|
initTabbar() {
|
|
if (this.identity == '实操教练') {
|
|
//教练
|
|
this.list = [
|
|
// {
|
|
// "pagePath": "/pages/tabbar/statistics/index",
|
|
// "text": "统计",
|
|
// "iconPath": require("../../static/images/tabbar/tj.png"),
|
|
// "selectedIconPath": require("../../static/images/tabbar/tjActive.png")
|
|
// },
|
|
{
|
|
"pagePath": "/pages/tabbar/student/index",
|
|
"text": "学员",
|
|
"iconPath": require("../../static/images/tabbar/xy.png"),
|
|
"selectedIconPath": require("../../static/images/tabbar/xyActive.png")
|
|
},
|
|
{
|
|
"pagePath": "/pages/tabbar/operateTrain/index",
|
|
"text": "实操训练",
|
|
"iconPath": require("../../static/images/tabbar/sc.png"),
|
|
"selectedIconPath": require("../../static/images/tabbar/scActive.png")
|
|
},
|
|
{
|
|
"pagePath": "/pages/tabbar/mine/index",
|
|
"text": "我的",
|
|
"iconPath": require("../../static/images/tabbar/wd.png"),
|
|
"selectedIconPath": require("../../static/images/tabbar/wdActive.png")
|
|
}
|
|
]
|
|
} else if(this.identity == '校长'|| this.identity == '驾校财务') {
|
|
//校长
|
|
this.list = [{
|
|
"pagePath": "/pages/tabbar/statistics/index",
|
|
"text": "统计",
|
|
"iconPath": require("../../static/images/tabbar/tj.png"),
|
|
"selectedIconPath": require("../../static/images/tabbar/tjActive.png")
|
|
},
|
|
{
|
|
"pagePath": "/pages/tabbar/student/index",
|
|
"text": "学员",
|
|
"iconPath": require("../../static/images/tabbar/xy.png"),
|
|
"selectedIconPath": require("../../static/images/tabbar/xyActive.png")
|
|
},
|
|
{
|
|
"pagePath": "/pages/tabbar/mine/index",
|
|
"text": "我的",
|
|
"iconPath": require("../../static/images/tabbar/wd.png"),
|
|
"selectedIconPath": require("../../static/images/tabbar/wdActive.png")
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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的底部
|
|
|
|
.tab-bar-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.tab_img {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
.tab_text {
|
|
font-size: 24rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|