vue实现无缝向上轮播列表

<template>

  <div class="left-box">

    <el-row :gutter="24" class="right-header right-row">

      <el-col :span="8">批次</el-col>

      <el-col :span="6">时间</el-col>

      <el-col :span="5">标段</el-col>

      <el-col :span="5">人员</el-col>

    </el-row>

    <div id="publishMain" class="main">

      <div id="publishMain1">

        <el-row

          :gutter="24"

          v-for="(item, index) in persons"

          :key="index"

          class="right-values right-row"

          :class="item.class"

        >

          <el-col :span="8">{{ item.a }}</el-col>

          <el-col :span="6">{{ item.b }}</el-col>

          <el-col :span="5">{{ item.c }}</el-col>

          <el-col :span="5">{{ item.d }}</el-col>

        </el-row>

      </div>

      <div id="publishMain2"></div>

    </div>

  </div>

</template>

 

<script>

export default {

  name: "quaright",

  data() {

    return {

      timer: null,

      persons: [

        {

          a: "112-5565",

          b: "2020-06-08 09:39",

          c: "计划问",

          d: "杨方法"

        },

        {

          a: "112-55dd65",

          b: "2020-06-08 09:31",

          c: "计划",

          d: "杨色"

        },

        {

          a: "f5221-96",

          b: "2020-06-08 08:27",

          c: "合格区",

          d: "胥门"

        },

        {

          a: "112-55d65",

          b: "2020-06-07 16:53",

          c: "计划",

          d: "胥门"

        },

        {

          a: "1w12-5565",

          b: "2020-06-07 16:23",

          c: "很关键",

          d: "何放"

        },

        {

          a: "112-5565e",

          b: "2020-06-07 15:09",

          c: "功夫",

          d: "何胥门"

        },

        {

          a: "112-556d5",

          b: "2020-06-07 14:38",

          c: "大坝",

          d: "胥门"

        },

        {

          a: "112-556543d",

          b: "2020-06-07 13:59",

          c: "大坝",

          d: "胥门"

        }

      ]

    };

  },

  async mounted() {

    this.$nextTick(() => {

      this.rollUp();

    });

  },

  beforeDestroy() {

    this.timer = null;

    clearInterval(this.timer);

  },

  methods: {

    /*向上轮播*/

    async rollUp() {

      let ul1 = document.getElementById("publishMain1");

      let ul2 = document.getElementById("publishMain2");

      let box = document.getElementById("publishMain");

      ul2.innerHTML = ul1.innerHTML;

      box.scrollTop = 0;

      function rollStart() {

        if (box.scrollTop >= ul1.scrollHeight) {

          box.scrollTop = 0;

        } else {

          box.scrollTop++;

        }

      }

      this.timer = setInterval(rollStart, 50);

    }

  }

};

</script>

 

<style lang="scss" scoped>

.left-box {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

 

  .right-row {

    margin: 0 !important;

    height: 3rem;

    line-height: 3rem;

    font-size: 1.2rem;

    color: #fff;

    .el-col {

      padding: 0 !important;

      text-align: center;

    }

    .el-col-8 {

      text-align: left;

      text-indent: 1.5rem;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;

    }

  }

  .right-header {

    border-bottom: 0.1rem solid #405fc9;

    line-height: 2.2rem;

  }

 

  .main {

    overflow: hidden;

    height: calc(100% - 3rem);

    .right-values {

      .w-info {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

      }

    }

  }

}

</style>