vue 实现table的无限滚动

Z_Xshan

已于 2022-07-13 14:23:38 修改

阅读量1.3k

点赞数 2

分类专栏： vue 文章标签：大数据

于 2022-07-12 15:15:52 首次发布

本文链接：https://blog.csdn.net/Z_Gleng/article/details/125743807

版权

vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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