vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）

最新推荐文章于 2024-10-12 15:19:06 发布

fuux

最新推荐文章于 2024-10-12 15:19:06 发布

阅读量7.7k

点赞数 8

分类专栏： vue 文章标签： vue js vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42586895/article/details/104267743

版权

本文介绍了使用Vue来实现移动端轮播图的方法，包括触摸滑动滚动、自动轮播、无缝滚动和循环功能。首先展示了轮播图的效果图，接着详细解析了具体的实现代码，包括HTML结构、数据说明、过渡效果处理、触摸事件监听以及在Vue中如何进行数据监听和计算。文章适合前端开发者学习。

摘要由CSDN通过智能技术生成

移动端轮播图——Vue

喜欢的小伙伴可以和我互相关注哦
有任何疑问都可以私聊我
互相学习，共同进步

pc端轮播图主页里也有哦

还是老样子，先看效果图

在这里插入图片描述

具体实现代码解析

HTML结构

<div class="swiper">
  <div class="container">
    <ul 
    ref="imgBox"
     @transitionend="animateEnd" 
     @touchstart="touchstart"
     @touchmove="touchmove"
     @touchend="touchend">
     <!-- 过渡结束事件、开始触摸、触摸移动和触摸结束事件 -->
    <!-- 为了实现无缝循环滚动需要在li前后分别复制最后一张图片和第一张图片 -->
      <li><img :src="imgArr[imgArr.length-1].src" alt=""></li>
      <li 
      v-for="(item, index) in imgArr"
      :key="index"
      >
        <img :src="item.src" alt="">
      </li>
      <li><img :src="imgArr[0].src" alt=""></li>
    </ul>
  </div>
  <div class