编写tabbar

最新推荐文章于 2023-06-26 19:32:18 发布

。。媛。。

最新推荐文章于 2023-06-26 19:32:18 发布

阅读量118

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/caoyuan258/article/details/110952531

版权

vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!-- 底部 -->
<template>
    <div class="footer">
        <div v-for="(item, index) in footerlist" :key="index" v-jump="item.to" class="footer_item" @click="dot(index)" :class="activeIndex==index?'active':''">
            <img :src="activeIndex==index?item.selectImg:item.img" alt="">
            <div class="footer_font">{{ item.text }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            activeIndex:0,
            footerlist:[
                {
                    img:'/static/img1/img_03.jpg',
                    to:'/index',
                    text:'首页',
                    selectImg:'/static/img1/img_01_06.jpg'
                },
                 {
                    img:'/static/img1/img_01_08.jpg',
                    to:'/course',
                    text:'课程',
                    selectImg:'/static/img1/img_05.jpg'
                },
                 {
                    img:'/static/img1/img_01_10.jpg',
                    to:'/location',
                    text:'约课记录',
                    selectImg:'/static/img1/img2_03.png'
                },
                 {
                    img:'/static/img1/img_01_03.jpg',
                    to:'/index',
                    text:'练习',
                    selectImg:'/static/img1/img3_03.png'
                },
                 {
                    img:'/static/img1/img_01_13.jpg',
                    to:'/index',
                    text:'我的',
                    selectImg:'/static/img1/img3_03.png'
                }
            ]
        }
    },

    mounted(){
        
    },
    methods: {
        dot(index){
            this.activeIndex=index
        }
    },
    components: {
        
    },
}

</script>
<style scoped>
    .footer{
        width: 100%;
        height: 0.7rem;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right:0
    }
    div>img{
        width: 0.4rem;
        height: 0.4rem;
    }
    .footer_item{
        width: 20%;
        text-align: center;
    }
.footer_font{
    font-size: 0.2rem;
    margin-top: 0.1rem;

}
.active{
    color:orange
}
</style>