vue 实现无缝向左滚动 鼠标悬停、离开时停止、开始滚动

效果:

可以根据此代码改为轮播

html代码：

<template>
  <div class="announcement">
    <div class="cont">
      <div
        class="contlist"
        ref="contlist"
        @mouseover="stopScroll"
        @mouseout="startScroll"
      >
        <ul>
          <li v-for="(item, index) in list" :key="index">
            {{ index + 1 }} 、{{ item.name }} {{ item.time }}
          </li>
        </ul>
        <ul>
          <li v-for="(item, index) in list" :key="index">
            {{ index + 1 }} 、{{ item.name }} {{ item.time }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

JS代码：

<script>
export default {
  name: "",
  data() {
    return {
      list: [
        { name: "全运会女子三人篮球成年组资格赛本周开赛", time: "2019-12-18 16:20:34" },
        { name: "河南建业更名为 “河南嵩山龙门”", time: "2019-12-18 16:20:34" },
        { name: "河南队勇夺全国女篮 联赛三人制比赛 亚军", time: "2019-12-18 16:20:34" },
        { name: "省足协俱乐部杯锦标赛圆满落幕", time: "2019-12-18 16:20:34" },
        { name: "备战全运会建业女足迎来新教练", time: "2019-12-18 16:20:34" },
        { name: "2020年河南省体育传统项目学校国家级体育俱乐部中学生篮球锦标赛开幕式在河南", time: "2019-12-18 16:20:34" },
        { name: "全国男排超级联赛 河南男排获得第八", time: "2019-12-18 16:20:34" },
      ],
      scrollW: 0, //记录滚动到哪了
    };
  },
  created() {},
  methods: {
    //鼠标悬停，停止滚动
    stopScroll() {
      var target = this.$refs.contlist;
      clearInterval(this.scrollTime);
    },
    //鼠标移开 ，接着滚动
    startScroll() {
      var target = this.$refs.contlist;
      this.scrollW = target.offsetLeft; // 移开时记录向左移动的距离
      this.scroll();
    },
    //循环滚动
    scroll() {
      var that = this; //因为定时器里要使用vue对象时不能用this, 在定时器中的 this 代表
      var target = this.$refs.contlist;
      var initLeft = 0;
      if (this.scrollW < 0) {
        initLeft = this.scrollW * -1;
      }
      //定时器
      this.scrollTime = setInterval(function () {
        initLeft++;
        if (initLeft >= target.offsetWidth / 2) {
          initLeft = 0;
        }
        target.style.left = "-" + initLeft + "px"; //获取不到translateX的值改用 left

        //target.style = 'transform: translateX(-'+ initLeft +'px)';
      }, 16);
    },
  },
  mounted() {
    //实例挂载完毕前
    //调用滚动代码
    this.scroll();
  },
};
</script>

css代码:

<style scoped lang="css">
ul,
li,
em {
  margin: 0;
  padding: 0;
}
.cont {
  height: 40px;
  line-height: 40px;
  background-color: #000;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.contlist {
  position: absolute;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}
.contlist ul {
  display: flex;
  flex-direction: row;
}
.contlist ul li {
  font-size: 12px;
  margin-right: 25px;
  height: 40px;
  line-height: 40px;
  display: flex;
  flex-direction: row;
}
.contlist ul li em {
  color: #f80;
  font-size: 12px;
  padding-right: 10px;
}
</style>