前端vue2实现信息卡片向上轮播效果

效果如下 每个信息卡片不间断向上滚动实现轮播效果  

html部分

 

                <div class="news" id="publishMain">
                  <div
                    id="publishMain1"
                    :class="{ anim: animate }"
                    @mouseenter="stop()"
                    @mouseleave="up()"
                  >
                    <div
                      class="news_name"
                      v-for="item in newsList"
                      :key="item.id"
                    >
                      <p style="color: #50bae0">
                        最近发布时间:
                        <span style="color: #fff"> {{ item.date }}</span>
                      </p>

                      <p style="color: #50bae0">
                        溯源归属:
                        <span style="color: #fff">
                          {{ item.traceability }}</span
                        >
                      </p>
                    </div>
                  </div>
                  <div id="publishMain2"></div>
                </div>

全局变量

 data() {
    return {
      timer: null,
      animate: false,
      newsList: [
        { id: 1, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 2, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 3, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 4, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 5, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 6, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 7, date: "2024.06.12 23:30:09", traceability: "xxx" },
        { id: 8, date: "2024.06.12 23:30:09", traceability: "xxx" },
      ],
          }
        }

methods方法

  methods: {
   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);
    },

    //鼠标移上去停止
    stop() {
      clearInterval(this.timer);
    },
    //鼠标离开继续
    up() {
      this.rollUp();
    },
  },
  beforeDestroy() {
    this.stop();
  },

mounted执行

 mounted() {
 
    this.$nextTick(() => {
      this.rollUp();
    });
  },