表头触摸滑动效果

表头触摸滑动效果

<template>
  <div class="biaotou">
    <ul>
        <li class="li" v-for="i in list" :key="i.idx" @mouseover="dianji_xuanze(i)" >
            {{i.name}}
        </li>
        <li class="zi"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "biaotou",
  data() {
    return {
        list:[
            {
                name:'111',
                idx:'1'
            },
            {
                name:'222',
                idx:'2'
            },
            {
                name:'333',
                idx:'3'
            },
            {
                name:'444',
                idx:'4'
            },
        ],
    };
  },
  created() {},
  methods: {
        dianji_xuanze(i){
            console.log(i)
            $('.li').siblings('.zi').stop(true, false).animate({ marginLeft: (Number(i.idx)-1 )* (100) }, 300);//实现下划线滑动
        }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul{
    display: flex;
    align-items: center;
    position: relative;
}
li{
    width:100px;
    height:40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
.li{
    z-index: 99999;
}
.zi{
    position: absolute;
    width:100px;
    height:40px;
    background-color: red;
}
</style>

搬码试下呗 嘿嘿