vue移动端底部导航栏组件

最新推荐文章于 2024-08-20 09:25:03 发布

正函数　

最新推荐文章于 2024-08-20 09:25:03 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue 底部导航栏 vue移动端

本文链接：https://blog.csdn.net/weixin_45799605/article/details/103046725

版权

vue 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

需要更换图片样式自行更改
投的页面不需要底部导航栏在在路由原信息里面设置true或false 在使用组件是进行显示和隐藏

<template>
    <div class="footbar-main">
        <ul class="bootbar">
            <router-link class="bootbar-item" :to="{name: 'home'}" tag="li">
                <span class="footbar-img home"></span>
                <span class="footbar-text">首页</span>
            </router-link>
            <router-link class="bootbar-item" :to="{name: 'kind'}" tag="li">
                <span class="footbar-img kind"></span>
                <span class="footbar-text">分类</span>
            </router-link>
            <router-link class="bootbar-item" :to="{name: 'find'}" tag="li">
                <span class="footbar-img find"></span>
                <span class="footbar-text">发现</span>
            </router-link>
            <router-link class="bootbar-item" :to="{name: 'mine'}" tag="li">
                <span class="footbar-img mine"></span>
                <span class="footbar-text">我的</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Footbar',
    data() {
        return {

        }
    }
}
</script>
<style lang="scss" scoped>
.footbar-main {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 80px;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    .bootbar {
        display: flex;
        height: 100%;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        .bootbar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            height: 100%;
            .footbar-img {
                // 背景图片公共
                height: 40px;
                width: 40px;
                background-size: 80%;
                background-position: center;
                background-repeat: no-repeat;
                //当前展示图片
                &.home {
                    background-image: url("../../assets/imgs/icons/home.png");
                }

                &.kind {
                    background-image: url("../../assets/imgs/icons/kind.png");
                }

                &.find {
                    background-image: url("../../assets/imgs/icons/find.png");
                }

                &.mine {
                    background-image: url("../../assets/imgs/icons/mine.png");
                }
            }
            // 当前激活路由图片
            &.router-link-active {
                .footbar-text{
                    color: #1C4B47;
                }
                .footbar-img.home {
                    background-image: url("../../assets/imgs/icons/home-active.png");
                }
                .footbar-img.kind {
                    background-image: url("../../assets/imgs/icons/kind-active.png");
                }
                .footbar-img.find {
                    background-image: url("../../assets/imgs/icons/find-active.png");
                }
                .footbar-img.mine {
                    background-image: url("../../assets/imgs/icons/mine-active.png");
                }
            }
            .footbar-text {
                padding-top: 5px;
                font-size: 12px;
                color: #8e8e93;
            }
        }
    }
}
</style>
```