vue文字首尾相连无限轮播

前言

工作中用到了这么个东西，时间紧急搜索了一种写法临时用。空闲下来准备自己写一个，简单花了一点时间写了个demo，分享一下。（注意：这个demo只经过了简单测试，你要是在实际项目中用是需要自己调整的）

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    #app {
      height: 100vh;
      background-color: #ccc;
      padding: 1px;
      box-sizing: border-box;
    }

    #app div {
      overflow-x: hidden;
      white-space: nowrap;
    }

    #app div p {
      width: fit-content;
      transition: transform 16.7ms;
      margin: 0;
      display: flex;
    }

    #app div p span {
      display: inline-block;
      padding-right: 48px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div ref="msg">{{msg}}</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        msg: '别绪如丝梦不成，那堪孤枕梦边城。因听紫塞三更雨，却忆红楼半夜灯。书郑重，恨分明，天将愁味酿多情。起来呵手封题处，偏到鸳鸯两字冰。'
      },
      mounted() {
        this.carouselText()
      },
      methods: {
        // 此处替换轮播区域dom结构用来实现轮播效果，当然你也可以直接写好这个dom结构直接用
        carouselText() {
          const msg = this.$refs.msg
          const p1 = document.createElement('p')
          const s1 = document.createElement('span')
          const s2 = document.createElement('span')
          s1.innerText = msg.innerText
          s2.innerText = msg.innerText
          p1.append(s1)
          p1.append(s2)
          msg.innerText = ''
          msg.append(p1)
          this.carouselAnime(0)
        },
        // 轮播动画
        carouselAnime(right) {
          const msgArea = this.$refs.msg.children[0]
          if (right < msgArea.offsetWidth - this.$refs.msg.offsetWidth) { // 轮播距离判断，这个判断也可以没有，这是我早期思路留下的，留着也没问题
            msgArea.style.transform = `translateX(-${right}px)`
            if (right > msgArea.children[0].offsetWidth) { // 判断第一遍内容已经完全播完，第二遍内容刚到最左侧时把第一段内容重新移到最左侧替换当前位置的第二遍内容，这里仔细看的话会看出一点替换的痕迹
              right = 0
              msgArea.style.transform = `translateX(0)`
            }
            right++
          }
          setTimeout(() => { // 定时器开启轮播
            this.carouselAnime(right)
          }, 16.7)
        }
      }
    })
  </script>
</body>

</html>

代码很简单，思路也写在了注释里，有机会我在更新点别的东西与大家分享吧！

vue文字首尾相连无限轮播

悦读