h5跑马灯效果

原创

已于 2023-04-06 18:14:30 修改 · 494 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

于 2023-04-06 18:12:35 首次发布

该文章展示了一个使用Vue.js框架创建的无缝滚动效果，结合手指左右滑动操作实现内容的x轴移动。通过在内容区域后面复制并添加内容来达到无缝滚动，同时利用touchstart,touchmove,touchend事件处理手指滑动，动态更新滚动位置并限制边界。

无缝滚动效果，外加手指的移动效果

思路：

1.无缝滚动1个内容区域，复制一下这个内容，追加到改内容的后面，形成无缝滚动的效果

2.手指左滑右滑进行x轴方向的加减

代码如下：

<template>
  <div class="scroll-container" ref="container">
    <div
      class="scroll-content"
      ref="content"
      @touchstart.stop="handlerTouchStart"
      @touchmove.stop="handlerTouchMove"
      @touchend.stop="handlerTouchEnd"
    >
      <!-- 滚动内容放在这里 -->
      <div class="list">
        <div v-for="(item, index) in list" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import a from "../assets/imgs/1.jpg";
import b from "../assets/imgs/2.jpg";
import c from "../assets/imgs/3.jpg";
import d from "../assets/imgs/4.jpg";
import e from "../as