Vue实现简易跑马灯效果

下面是详细讲解“Vue实现简易跑马灯效果”的完整攻略。

一、实现思路

要实现简易跑马灯效果，其实我们需要做的就是让内容在一定时间间隔内左右滚动，并且滚到最后之后能够无缝地继续滚动。Vue 中实现这一效果的具体思路和步骤如下所示：

首先，我们需要把要滚动的内容放在一个独立的容器里面，比如 div 容器；
接着，在该容器下面添加一个需要滚动的区域，比如是一个 ul 标签，其中每个 li 标签表示要滚动的一条内容；
然后，我们可以通过修改该区域的 left 值，来实现区域的左右滚动效果；
最后，我们要在定时器中定时更新该区域的 left 值，实现自动滚动效果，同时还需要考虑在滚动到列表最后一项之后，将其复制并添加到列表首部，以实现无缝滚动的效果。

二、具体实现步骤

以下是具体的实现步骤，在代码示例中我们假设要滚动的内容是一组图片：

在组件中定义一个 data 属性来保存需要滚动的内容，假设我们定义为 images，初始值为空数组；
在组件的 mounted 生命周期钩子中，通过接口或者其他方式获取需要滚动的数据，并将其赋值给 images；
在组件的 template 中，创建一个 div 容器，用来包含需要滚动的内容；
在该 div 容器下面，添加一个 ul 标签，设置其样式 position: relative，并添加一个 id 用来方便后续操作；

<div class="marquee-wrap">
  <ul class="marquee-list" id="marquee-list">
    <li v-for="(image,index) in images" :key="index">
      <img :src="image.url" alt="">
    </li>
  </ul>
</div>

为了让滚动的内容在 div 容器中进行显示，需要设置 div 容器的 overflow: hidden 样式，并且设置宽度，使得用户能够看到部分滚动内容；

.marquee-wrap {
  overflow: hidden;
  width: 500px;
}

接下来，需要通过计算属性或者方法来计算要滚动的距离，例如我们可以在组件中定义一个 scrollDistance 的计算属性来计算：

scrollDistance () {
  return -this.step * this.currentIndex
}

其中，currentIndex 表示当前滚动到的是第几个元素，step 表示每次需要滚动的距离，而 scrollDistance 就是计算得出的 ul 标签的 CSS left 值。
7. 接下来，需要在组件中定义 startScroll() 方法，并在 mounted 生命周期钩子中调用该方法。该方法用来在一定的时间间隔内更新 currentIndex 值，以实现自动滚动效果。具体代码如下所示：

startScroll () {
  setInterval(() => {
    this.currentIndex += 1
    if (this.currentIndex === this.images.length) {
      const ulNode = document.getElementById('marquee-list')
      const firstLi = ulNode.children[0]
      ulNode.appendChild(firstLi.cloneNode(true))
      ulNode.removeChild(firstLi)
      this.currentIndex = 0
    }
  }, this.interval)
}

该方法会每隔一定时间（interval）执行一次，使得 currentIndex 值加一，同时也需要检查 currentIndex 是否已经滚动到了最后一项，如果是，则需要将第一个 li 元素复制并添加到列表末尾，并删除掉第一个 li 元素，这样就实现了无缝滚动的效果。