PC端轮播图支持手动滑动

最新推荐文章于 2026-05-25 11:13:56 发布

原创最新推荐文章于 2026-05-25 11:13:56 发布 · 816 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

文章讲述了在PC端实现轮播图手动滑动和鼠标拖动功能遇到的问题，首先使用ElementUI的Carousel组件因不支持手动操作而转向Vant的Swipe组件。但由于Vant是移动端组件库，存在兼容性问题。为了解决PC端的鼠标拖动，引入了`@vant/touch-emulator`并禁止图片的dragstart事件。同时提供了onLeft和onRight方法来控制轮播图的左右切换。

需求：PC端轮播图支持手动滑动/鼠标拖动，且可以左右切换。

实现：最开始用的是elementUI的Carousel组件，不支持手动滑动/鼠标拖动，然后改成了Vant的Swipe组件，加上左右箭头，调用Swipe 方法prev()、next()

问题1：由于vant是移动端的组件库，对pc端会有兼容性问题，例如Swipe，移动端是@touch，该组件做了相应的监听，而PC端是@mouse，没有做对应的监听，因此在pc端无法用鼠标拖动图片。

解决方法：

终端输入npm i @vant/touch-emulator --save

然后在main.js中引入import '@vant/touch-emulator'即可

问题2：鼠标拖动图片会有问题

解决方法：注意要禁止与图片的交互操作，否则鼠标拖动图片会有问题，加上@dragstart.prevent指令即可

浏览器支持

Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。

Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

<div class="lunboPage">
    <div class="left-icon">
      <van-icon name="arrow-left" @click="onLeft" />
    </div>
    <div class="right-icon">
      <van-icon name="arrow" @click="onRight" />
    </div>
    <div class="pptPart">
      <van-swipe ref="vanSwipeRef" :touchable="true">
        <van-swipe-item>
          <img src="../assets/lunbo/01.png" @dragstart.prevent />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/lunbo/03.png" @dragstart.prevent />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/lunbo/05.png" @dragstart.prevent />
        </van-swipe-item>
        </van-swipe-item>
      </van-swipe>
    </div>
</div>

    onLeft () {
      this.$nextTick(() => {
        this.$refs.vanSwipeRef.prev()
      })
    },
    onRight () {
      this.$nextTick(() => {
        this.$refs.vanSwipeRef.next()
      })
    }