js的鼠标事件和手写js的表格滚动

js的鼠标事件和手写js的表格滚动

一.知识点：

1.鼠标事件，为什么这里用mouseenter和mouseleave，而不是mouseover和mouseout
mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。
mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。
mouseover和mouseout比mouseenter和mouseleave先触发

2.要想让他顺滑的滚动就要把时间设置短点
3.通过绝对定位中top的变化实现滚动，但要达到李寻欢的效果，就要当地一个数据滚到最上面就要把他去掉，移到最下面来，top清为0.

标题二.代码：

<template>
  <div class="twoPage">
    <div class="content">
      <div class="tableBox">
        <ul :style="{'top':top+'px'}" @mouseenter="stopScroll" @mouseleave="continueScroll">
          <li v-for="(item,index) in itemList">
            <span class="name">{{item.name}}</span>
            <span class="age">{{item.age}}</span>
            <span class="sex">{{item.sex}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      itemList:[
        {name:'小米',age:18,sex:'girl'},
        {name:'小胖',age:33,sex:'boy'},
        {name:'小平',age:28,sex:'girl'},
        {name:'小明',age:48,sex:'girl'},
        {name:'小麦',age:11,sex:'girl'},
        {name:'小如',age:21,sex:'boy'},
        {name:'小王',age:17,sex:'girl'},
        {name:'小蕊',age:23,sex:'girl'},
        {name:'小马',age:22,sex:'girl'},
       
      ],
      top:0,
      timeInterval:null
    }
  },
  created(){
    this.changeTop()
  },
  methods:{
   changeTop(){
     this.timeInterval=setInterval(()=>{
       this.top--;
       if(this.top==-21){
         this.itemList.shift()
         this.itemList.push(this.itemList[0])
         this.top=0
       }
     },100)
   },
   stopScroll(){
     clearInterval(this.timeInterval)
   },
   continueScroll(){
     this.changeTop()
   }
  }
}
</script>
<style scoped>
  .twoPage{
    width: 100%;
    height: 100%;
  }
  .tableBox{
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    position: relative;
  }
  ul{
    position: absolute;
    width: 100%;
    cursor: pointer;
  }
  .name,.age,.sex{
    width: 100px;
    display: inline-block;
  }
</style>