vue案例：底部导航栏

作者: 图恩分类: 编程开发阅读: 423发布时间： 2022-01-20 06:31:46

前言

话不多说，先上效果图：

效果图

这是个平平无奇的导航栏，颜色没有特意去调整，看起来不是很好看，不过切换选项时的动画还是可以的。

功能介绍

这个导航栏选项发生改变时，会有一个圆圈先缩小，移动到点击的选项时再变回原来的大小的动画，圆圈是ul里第一个li的一个div，它用绝对定位来固定位置，但是如果单纯地只是定位，会把选项的图标和文字给遮住，所以要用z-index属性来把它放到图标和文字的下面。

            <li @click='transti(0,$event)'>
                <div class="iconfont icon-shouye"></div>
                <p>首页</p>
                <div class="choose" ref="tasn"></div>
            </li>

          .big-box li .choose {
            position: absolute;
            top: -25px;
            width: 125px;
            height: 125px;
            border-radius: 75px;
            background-color: #f093fb;
            z-index: -1;
            transition: all 0.5s;
            }

js里要定义计时器的原因是要把圆圈变回原来的形状，为什么时间是500毫秒？

因为transition这个属性的过渡时间是0.5s，0.5s就是500毫秒，在过渡完成后圆圈也刚好恢复原来的形状。

            setTimeout(() => {
                a.style.cssText = 
                'transform:scale(1,1) translateX(' + i * 125 + 'px);'+
                'background-color:'+this.color[i]+';'
            }, 500)

下面是所有代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部导航栏</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div id="app">
        <ul class="big-box">
            <li @click='transti(0,$event)'>
                <div class="iconfont icon-shouye"></div>
                <p>首页</p>
                <div class="choose" ref="tasn"></div>
            </li>
            <li @click='transti(1,$event)'>
                <div class="iconfont icon-weibiaoti2fuzhi13"></div>
                <p>精选</p>
            </li>
            <li @click='transti(2,$event)'>
                <div class="iconfont icon-shoucang"></div>
                <p>收藏</p>
            </li>
            <li @click='transti(3,$event)'>
                <div class="iconfont icon-wode"></div>
                <p>我的</p>
            </li>
        </ul>
    </div>
    <script src="../../js/vue.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

body {
    margin: 0;
    padding: 0;
}

ul,
li,
p {
    margin: 0;
    padding: 0;
}

.big-box {
    width: 500px;
    height: 100px;
    margin: 200px auto;
    list-style: none;
    background-color: aliceblue;
    box-shadow: 0 0 3px rgb(180, 180, 180);
    border-radius: 5px;
}

.big-box li {
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
    color: #777;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all 1s;
}


.big-box li:nth-child(1) {
    color: white;
}

.big-box li div {
    width: 100%;
    height: 60%;
    line-height: 70px;
}

.big-box li p {
    width: 100%;
    font-size: 16px;
}

.big-box li .choose {
    position: absolute;
    top: -25px;
    width: 125px;
    height: 125px;
    border-radius: 75px;
    background-color: #f093fb;
    z-index: -1;
    transition: all 0.5s;
}

Vue.config.productionTip = false

new Vue({
    el: '#app',
    data: {
        color: ['#f093fb', '#8ec5fc', '#00f2fe', '#fee140']
    },
    methods: {
        transti(i, event) {
            let li = event.currentTarget
            let a = this.$refs.tasn
            li.parentElement.querySelectorAll('li').forEach((e) => {
                e.style.color = '#777'
            })
            li.style.color = 'white'
            a.style.cssText = 'transform:scale(1,0.6) translateX(' + i * 125 + 'px);'
            setTimeout(() => {
                a.style.cssText = 
                'transform:scale(1,1) translateX(' + i * 125 + 'px);'+
                'background-color:'+this.color[i]+';'
            }, 500)
        }
    },
})

本文章由javascript技术分享原创和收集

vue案例：底部导航栏

发表评论 (审核通过后显示评论)：

文章评论(0)