前端实现类似公告的无缝横向滚动

<template>
  <div>
    <div class="scroll-temp">
      <div class="temp-box" ref="temp">
        <div v-for="(v,i) in list" :key="v + '1'" class="li">
         {{ i+1}}. {{v}}
        </div>
        <div v-for="(v,i) in list" :key="v + '2'" class="li">
          {{ i+1}}. {{v}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let x = 0;
export default {
  data() {
    return {
      tempInterval: undefined,
      list:[
        '长沙橘子洲', '长沙岳麓山', '长沙五一广场', '长沙博物馆',
      ]
    };
  },
  components: {},
  computed: {},
  destroyed() {
    clearInterval(this.tempInterval);
  },
  mounted() {
    this.tempInterval = setInterval(this.rollTemp, 20);
  },
  methods: {
    rollTemp() {
      let all = 0;
      let count = this.$refs.temp.childElementCount;
      for (let i = 0; i < count; i++) {
        all += this.$refs.temp.children[i].offsetWidth;
      }
      let half = all >> 1;
      if (x < 1 - half) {
        x = 0;
      }
      x -= 2;
      this.$refs.temp.style.transform = "translateX(" + x + "px)";
    }
  }
};
</script>
<style scoped lang="scss" >
.scroll-temp {
  background:pink;
  color: #000;
  font-size: 20px;
  top: 100px;
  left: 480px;
  width: 580px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  .temp-box {
    white-space: nowrap;
    .li {
      display: inline;
      height: 30px;
      padding-right: 20px;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

实际上就是有两个列表，第一个列表滚动完后到第二个列表，快速替换成第一个列表，就不会有空缺的了