leromro-mini/components/CustomTabBar/index.vue

<template>
    <view class="tab_bar">
        <view class="tabbarBox">
            <view class="handleBox" v-for="(item, index) in tabBarList" :key="index">
                <view class="menuBox" @click="goPages(item,index)">
                    <view class="menuIcon">
                        <image v-if="index != selectIndex" class="img" :src="item.iconPath"></image>
                        <image v-else class="img" :src="item.selectedIconPath"></image>
                    </view>
                    <view class="menuName">
                        <text :class="index == selectIndex ? 'TextColor' : 'Text'">{{ item.text }}</text>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    props: {
        page: {
            type: String,
            default: "homeIndex"
        }
    },
    watch: {
        page: {
            handler(value) {
                console.log('value',value);
                
                this.selectIndex = value;
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            selectIndex: null,
            userType: uni.getStorageSync('userType') //读取本地存储
        }
    },
    computed: {
        //获取当前页面
        tabBarList() {
            if(this.userType === 1){
                return [
                {
                    "pagePath": "/pages/index",
                    "iconPath": "/static/images/tabbar/home.png",
                    "selectedIconPath": "/static/images/tabbar/home_.png",
                    "text": "首页",
                },
                {
                    "pagePath": "/pages/mallMenu",
                    "iconPath": "/static/images/tabbar/class.png",
                    "selectedIconPath": "/static/images/tabbar/class_.png",
                    "text": "分类",
                },
                {
                    "pagePath": "/pages/classify",
                    "iconPath": "/static/images/tabbar/work.png",
                    "selectedIconPath": "/static/images/tabbar/work_.png",
                    "text": "订单",
                },
                {
                    "pagePath": "/pages/mine",
                    "iconPath": "/static/images/tabbar/mine.png",
                    "selectedIconPath": "/static/images/tabbar/mine_.png",
                    "text": "我的",
                }
            ]
            }
            return [
                {
                    "pagePath": "/pages/index",
                    "iconPath": "/static/images/tabbar/home.png",
                    "selectedIconPath": "/static/images/tabbar/home_.png",
                    "text": "首页",
                },
                {
                    "pagePath": "/pages/mallMenu",
                    "iconPath": "/static/images/tabbar/class.png",
                    "selectedIconPath": "/static/images/tabbar/class_.png",
                    "text": "分类",
                },
                // {
                //     "pagePath": "/pages/chat",
                //     "iconPath": "/static/images/tabbar/class.png",
                //     "selectedIconPath": "/static/images/tabbar/class_.png",
                //     "text": "消息",
                // },
                {
                    "pagePath": "/pages/classify",
                    "iconPath": "/static/images/tabbar/work.png",
                    "selectedIconPath": "/static/images/tabbar/work_.png",
                    "text": "订单",
                },
                {
                    "pagePath": "/pages/mine",
                    "iconPath": "/static/images/tabbar/mine.png",
                    "selectedIconPath": "/static/images/tabbar/mine_.png",
                    "text": "我的",
                }
            ]
        }
    },
    //uniapp子组件不支持应用生命周期，所以只能用vue生命周期
    created() {



    }, 
    methods: {
        //进入tabble页
        goPages(page,index) {
            console.log('page,index',page,index,this.userType);
            uni.switchTab({
                url: page.pagePath
            })
        },

    },
}
</script>
<style lang="scss">
.tab_bar {
    width: 100vw;
    height: 150rpx;
    position: fixed;
    bottom: 0rpx;
    /* 模糊大小就是靠的blur这个函数中的数值大小 */
    // backdrop-filter: blur(10px);
    // border-radius: 60rpx;
    background-color: #fff;

    .tabbarBox {
        display: flex;
        margin-top: 10rpx;
        justify-content: space-evenly;


        .handleBox {
            width: 20vw;
            height: 110rpx;


            .menuBox {
                padding: 0rpx 20rpx;
                width: 120rpx;
                height: 98%;
                text-align: center;

                .img {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }
    }
}

.Text {
    font-size: 24rpx;
    font-family: Cochin, serif;
    font-weight: 900;
}

.TextColor {
    @extend .Text;
    color: #d81e06;
}
</style>