vue 横向菜单滚动定位_vue 横向导航滚动 光标移动动画

{{item.title}}

:style="{

width:Num,

left:Left

}"

>

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)

}

}

}

.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;

}