vue 横向导航滚动 光标移动动画

<template>
    <div class="nav_wrapper">
        <div ref="navContainer" class="nav_container">
            <div class="nav_item" v-on:click="onClick(item)" v-for="(item,index) in Navs" :key="index">
                {{item.title}}
            </div>
                <div class="nav_footer_cursor" 
                    :style="{
                        width:Num,
                        left:Left
                        }"
                 ></div>
        </div>
    </div>
</template>

　　

<script>
import {mapState} from "vuex";
export default {
    data(){
        return{
            Left:"10px",
            Num:"64px"
        }
    },
    computed:mapState({
        Navs:"Navs"//这是拿到的导航列表
    }),
    methods:{
        onClick(obj){
            let num=window.event.target.offsetWidth;
            let positionNum=window.event.target.offsetLeft;
            // window.console.log(positionNum)
            this.Num=num+"px";
            this.Left=positionNum+"px";
            this.$store.dispatch("SortGoods",obj)
        }
    }
}
</script>

　　

<style scoped>
.nav_wrapper
{
    width:100%;
    height:40px;
    margin-top:64px;
}
.nav_item
{
    width:100px;
    height:40px;
    text-align: center;
    white-space: nowrap;
    padding:0 10px;
}
.nav_container::-webkit-scrollbar{
    display: none;
}
.nav_container
{
    width:100%;
    display: flex;
    position: relative;
    overflow: scroll;
    white-space: nowrap;
}
.nav_footer_cursor
{
    width:100%;
    height:3px;
    border-radius:3px;
    background: red;
    position: absolute;
    margin-top:20px;
    transition: all 0.3s linear 0.1s;
}
</style>　

 

 

效果图 :