jiangximiniprogramSchool/components/UserTab/UserTab.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="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,
            }
        },
        created() {
            this.currentName = this.name;
            
            var _this = this
			

            
            if (uni.getStorageSync('identity') == '1') {
                //教练
                _this.list = [{
					"pagePath": "/pages/tabbar/statistics/index",
					"text": "首页",
					"iconPath": "../../static/images/tabbar/tj.png",
					"selectedIconPath": "../../static/images/tabbar/tjActive.png"
				},
				{
					"pagePath": "/pages/tabbar/examSimulation/index",
					"text": "考场模拟",
					"iconPath": "../../static/images/tabbar/kc.png",
					"selectedIconPath": "../../static/images/tabbar/kcActive.png"
				},
				{
					"pagePath": "/pages/tabbar/operateTrain/index",
					"text": "实操训练",
					"iconPath": "../../static/images/tabbar/sc.png",
					"selectedIconPath": "../../static/images/tabbar/scActive.png"
				},
				{
					"pagePath": "/pages/tabbar/student/index",
					"text": "学员",
					"iconPath": "../../static/images/tabbar/xy.png",
					"selectedIconPath": "../../static/images/tabbar/xyActive.png"
				},
				{
					"pagePath": "/pages/tabbar/mine/index",
					"text": "我的",
					"iconPath": "../../static/images/tabbar/wd.png",
					"selectedIconPath": "../../static/images/tabbar/wdActive.png"
				}
			]
            } else if(uni.getStorageSync('identity') == '2') {
                //校长
                _this.list = [{
					"pagePath": "/pages/tabbar/statistics/index",
					"text": "统计",
					"iconPath": "../../static/images/tabbar/tj.png",
					"selectedIconPath": "../../static/images/tabbar/tjActive.png"
				},
				{
					"pagePath": "/pages/tabbar/student/index",
					"text": "学员",
					"iconPath": "../../static/images/tabbar/xy.png",
					"selectedIconPath": "../../static/images/tabbar/xyActive.png"
				},
				{
					"pagePath": "/pages/tabbar/mine/index",
					"text": "我的",
					"iconPath": "../../static/images/tabbar/wd.png",
					"selectedIconPath": "../../static/images/tabbar/wdActive.png"
				}
			]
            }else {
				_this.list = [{
					"pagePath": "/pages/tabbar/statistics/index",
					"text": "统计",
					"iconPath": "../../static/images/tabbar/tj.png",
					"selectedIconPath": "../../static/images/tabbar/tjActive.png"
				},
				{
					"pagePath": "/pages/tabbar/examSimulation/index",
					"text": "预约记录",
					"iconPath": "../../static/images/tabbar/kc.png",
					"selectedIconPath": "../../static/images/tabbar/kcActive.png"
				},
				{
					"pagePath": "/pages/tabbar/mine/index",
					"text": "我的",
					"iconPath": "../../static/images/tabbar/wd.png",
					"selectedIconPath": "../../static/images/tabbar/wdActive.png"
				}]
			}
        },
        methods: {
            switchTab(item, index) {
                this.currentName = item.text;
                
                let url = item.pagePath;
				console.log(url)
				uni.switchTab({
					url
				})
                // uni.reLaunch({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的底部

        .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>