vue 实现table的无限滚动_vue table 滚动

<template>
 
  <div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
 
    <table class="totall">
 
      <tr class="title">
        <th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
 
 
      </tr>
    </table>
 
        
    <div ref="moocBox" class="wrapper2">
          
      <table :class="{ marquee_top: animate }">
              
        <tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
                  
          <td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>
 
                
        </tr>
 
              
        <tr v-for="itemy in listData" class="rollData" ref="con2" :key="itemy">
                  
          <td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>
 
                
        </tr>
 
            
      </table>
 
          
    </div>
 
      
  </div>
</template>
 
<script>
export default {
  name: "Profile",
 
  data() {
    return {
      animate: false,
 
      liData: ["重点品类", "销售金额", "年周比", "达成率"],
 
      listData: [
        ["FM", "53.647", "-33.76", "86.15%"],
 
        ["A", "53.647", "-33.76", "86.15%"],
 
        ["B", "53.647", "-33.76", "86.15%"],
 
        ["C", "53.647", "-33.76", "86.15%"],
 
        ["D", "53.647", "-33.76", "86.15%"],
 
        ["E", "53.647", "-33.76", "86.15%"],
 
        ["F", "53.647", "-33.76", "86.15%"],
 
        ["G111", "53.647", "-33.76", "86.15%"],
      ],
 
      speed: 50,
 
      myScroll: null,
 
      iliHeight: 26,
 
      time: null,
 
      delay: 20,
    };
  },
 
  methods: {
    //滚动
 
    scrollUp() {
      this.$refs.moocBox.scrollTop++;
        // console.log(this.$refs.moocBox);
      if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
        //判断条件是否达到临界
 
        this.$refs.moocBox.scrollTop = 0;
      } else {
        this.$refs.moocBox.scrollTop++;
      }
    }, // 鼠标滑过暂停滚动
 
    mouseOver() {
      clearInterval(this.myScroll);
    }, //鼠标移开重新滚动
 
    mouseOut() {
      this.myScroll = setInterval(
        () => {
          this.$refs.moocBox.scrollTop++;
 
          this.scrollUp();
        },
 
        this.speed
      );
    },
  },
 
  components: {},
 
  computed: {},
 
  created() {},
 
  mounted() {
    this.myScroll = setInterval(() => {
      this.$refs.moocBox.scrollTop++;
 
      this.scrollUp();
    }, this.speed);
  },
 
  activated() {},
 
  deactivated() {},
 
  beforeDestoryed() {
    clearInterval(myScroll);
 
    this.myScroll = null;
  },
};
</script>
 
<style scoped>
.wrapper {
  overflow: hidden;
 
  height: 220px;
}
 
.wrapper2 {
  height: 180px;
 
  overflow: hidden;
}
 
table {
  border-collapse: collapse;
 
  border-spacing: 0;
 
  table-layout: fixed;
 
  background-color: rgb(2,  25,  80);
 
  width: 100%;
 
  color: rgb(141, 35, 35);
}
 
tabletr {
transition: all 2s ease .3s;
}
 
.marquee_top  {
      transition: all 0.5s ease-in-out;
 
      margin-top: -26px;
}
 
.title  {
    height: 40px;
 
    line-height: 40px;
 
    text-align: center;
}
 
th {
     padding: 5px 10px;
 
     width: 25%;
}
 
td {
     padding: 4px 10px;
 
     width: 25%;
}
 
table th {
    text-align: center;
}
 
table tr td  {
    width: 25%;
 
    text-align: center;
}
 
.rollData  {
    font-size: 16px;
}
</style>