Vue使用vue-awesome-swiper实现轮播,loop模式下,前一个项目的点击事件失效

原创

已于 2022-09-11 11:54:29 修改 · 置顶 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-09-11 11:39:05 首次发布

本文介绍了在Vue项目中使用Swiper组件时，遇到无限轮播模式下点击事件失效的解决方案。问题源于Swiper在无限轮播时复制页面但未复制点击事件。解决方法是在Swiper的回调函数中直接操作DOM，通过设置`swiperOption`的`on.click`回调，更新Vue实例的`swiperIndex`，从而确保点击事件能在每个轮播页面上正常工作。同时，文章还对比了click和tap事件在移动端的差异，推荐在移动端使用tap事件提高性能。

原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决办法：在swiper的回调函数中直接操作DOM

click和tap事件的区别

click事件

click事件是pc端的单机事件，但是当这个事件在移动端实现的时候，会出现延迟300ms的现象，所以移动端一般用tap来代替click。

tap事件

tap可以减少click在移动端的延迟，提高了性能。

案例：

<template>
  <div>
    <div class="main-content">
        <!-- 轮播图 -->
          <div>
            <swiper :options="swiperOption">
              <swiper-slide v-for="item in dataList" :key="item.id">
                <img
                  :src="item.imgUrl"
                  @tap="openDetail(item)"
                />
                <div class="swiper-content">{
  
  {item.name}}</div>
              </swiper-slide>
            </swiper>
          </div>
    </div>
  </div>
</temp

最低0.47元/天解锁文章