记录一个深坑，swiper第一次加载无法滑动的问题

最新推荐文章于 2023-12-28 10:08:05 发布

原创

最新推荐文章于 2023-12-28 10:08:05 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#深坑记录

在使用vue-awesome-swiper插件时遇到问题，首次加载页面时，swiper无法滑动，但刷新后恢复正常。通过监听touchMove事件发现与PointerEvent有关，该API可能未被swiper完全支持。在Firefox上表现正常，但在最新版Chrome中，通过检查chrome://flags/的实验性选项，发现某个选项影响了swiper的行为。开启特定选项后，swiper开始使用TouchEvent API，问题得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用了插件vue-awesome-swiper，结果却出现了第一次打开页面无法滑动的问题，刷新后正常。

 <div class="lunbo_Wrap" v-if="picListArry.length>1">
    <swiper :options="Options" ref="mySwiper" @slideChange="changeindex" @resize="resized" @touchMove="move">
      <swiper-slide><img class="first" src="../assets/image/phone.png" /></swiper-slide>
      <swiper-slide v-for="(item,idx) in picListArry" :key="idx" class="silder">
        <img  class="pics"  :src="item.node.display_url"  alt=""/>
        </swiper-slide>
      <swiper-slide><img class="last" src="../assets/image/phone.png" /></swiper-slide>
    </swiper>
  </div>

在这里我监听了一下touchMove事件，console一下结果却出现这个玩意：PointerEvent