Vue 3：防止 Swiper 使用鼠标而不是手指滑动

如何解决Vue 3：防止 Swiper 使用鼠标而不是手指滑动

在 Swiper 中使用鼠标时，我试图停止 pointerdown 事件，但在用手指 (https://swiperjs.com/swiper-api#methods-and-properties) 触摸时它应该仍然有效。 我已经尝试过使用“swiper.allowTouchMove”属性，但它也会停用触摸。

当我还试图在@touchStart 中停止传播以捕捉鼠标时，它说该函数不存在（Uncaught TypeError: e.stopPropagation is not a function）。

我非常感谢您提供有关如何仅通过鼠标事件停用滑动的建议。

谢谢！

这是我的代码：

<template>
  <div>
    <swiper
        @touchStart.stop="touchMove" **NOT WORKING**
        virtual
        navigation
    >
      <swiper-slide
          v-for="(slideContent,index) in slides"
          :key="slideContent"
          :virtualIndex="index"
          v-html="slideContent"
      ></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import SwiperCore,{ Virtual,Navigation } from 'swiper';
import { Swiper,SwiperSlide } from 'swiper/vue';

import 'swiper/components/navigation/navigation.scss';
import 'swiper/swiper.scss';
import 'swiper/components/effect-fade/effect-fade.scss';
// scroll container,virtual slides,navigation
SwiperCore.use([Virtual,Navigation]);

export default {
  components: {
    Swiper,SwiperSlide,},setup() {
    console.log(this)
  },methods: {
    touchStart: function (swiper,event) {
      console.log(swiper)
      console.log(event.type)
    },touchMove: function (swiper,event) {
      swiper.slideNext(1)
      console.log('test')
    }
  },data() {
    // Create array with 1000 slides
    const slides = Array.from({ length: 1000 }).map(
        (el,index) => '<html><body>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam at viverra mauris. Nullam aliquet eros diam,eget cursus augue tincidunt vitae. Nullam ac tortor non justo fermentum maximus at ac diam. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam porttitor nisl ut turpis cursus,id dapibus diam vulputate. Vestibulum id ultricies nibh,id viverra urna. Maecenas venenatis sem vitae leo porta,sed euismod urna molestie. Nunc id dui orci. Donec fermentum maximus lorem,eu efficitur enim porttitor ut. Quisque non eros ac odio pulvinar rutrum eget feugiat sem. Integer ut sapien a justo commodo suscipit. Vestibulum eget feugiat libero. Nulla luctus semper quam,vitae cursus purus tincidunt posuere. Mauris ut tellus sed neque porta auctor quis sit amet ex. Nam elementum condimentum odio,at varius nisi faucibus id.\n' +
            '\n' +
            'Cras tincidunt,nunc a eleifend vestibulum,ligula velit ornare libero,a faucibus sapien ante consequat eros. Nam nunc ipsum,semper sit amet lorem in,lobortis blandit ligula. Proin mollis,libero blandit elementum bibendum,lorem lacus fringilla nulla,a viverra quam purus vitae ligula. Sed vel facilisis nulla. Suspendisse viverra nisl sed lectus scelerisque,bibendum blandit velit dapibus. Curabitur metus felis,tempor vel tincidunt a,volutpat in ex. Duis egestas dolor suscipit justo dapibus ornare. Praesent vehicula volutpat neque,in convallis eros placerat ac. Phasellus id ligula sagittis,finibus ante ut,fringilla lacus. Maecenas in magna id erat viverra semper. Duis quis facilisis tellus,a lobortis elit. Etiam ornare sodales malesuada.\n' +
            '\n' +
            'Duis porttitor vitae ipsum dictum auctor. Nullam eget velit eu mi laoreet sollicitudin vel quis tellus. Duis feugiat massa nec magna tristique,sit amet scelerisque justo dignissim. Phasellus tincidunt consequat efficitur. In mollis quam sed ullamcorper fringilla. Maecenas pulvinar risus vel purus congue semper. Etiam varius accumsan aliquet. Sed in dictum est,quis accumsan ante. Sed lobortis nisl ut dolor rhoncus suscipit. Quisque fermentum,ex et consequat convallis,nibh quam consequat lacus,nec mattis ligula massa vel augue. Aliquam erat volutpat. In fermentum nisl quis ultrices congue.\n' +
            '\n' +
            'Donec eleifend neque et purus bibendum,a consectetur magna volutpat. Nunc facilisis nisl dui,in facilisis turpis convallis fringilla. Phasellus ornare sapien nec urna sollicitudin auctor sed at massa. Ut felis magna,faucibus id posuere vel,iaculis id orci. Ut a odio ac lacus malesuada semper sit amet convallis libero. Cras at mollis orci. Maecenas est lorem,placerat eget vestibulum id,pretium venenatis enim.\n' +
            '\n' +
            'Ut mattis tincidunt eleifend. Ut eu lorem nibh. In sed risus velit. Vivamus in dapibus nunc,ultricies tincidunt ligula. Orci varius natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Ut vestibulum bibendum elementum. Nullam maximus,purus eget rhoncus eleifend,quam quam malesuada tortor,a consectetur dolor ex vitae felis. Sed justo urna,fermentum sit amet enim nec,tincidunt pellentesque leo. Sed sed tincidunt felis. Nulla sagittis,felis sed convallis vehicula,nunc justo luctus velit,eget finibus nulla est vel mi. Maecenas euismod turpis ut mi gravida tincidunt.</body></html>'
    );
    return {
      slides,};
  },};
</script>

<style>
@media only screen and (max-width: 600px) {
  .swiper-button-prev::after,.swiper-button-next::after {
    visibility: hidden;
  }
}
@media only screen and (min-width: 601px) {
  .swiper-container {
    padding-left: 105px;
    padding-right: 105px;
  }
}

.swiper-slide-next,.swiper-slide-prev {
  visibility: hidden;
}

.swiper-container-horizontal > .swiper-navigation{
  position: absolute;
  bottom: 0;
}

.swiper-button-prev::after,.swiper-button-next::after {
  position: fixed;
  top: 50%;
}
</style>

Vue 3：防止 Swiper 使用鼠标而不是手指滑动

如何解决Vue 3：防止 Swiper 使用鼠标而不是手指滑动

相关推荐