ionic5 Vue3轮播图不自动轮播解决方案

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

官方文档：https://ionicframework.com/docs/api/slides

Ionic中的轮播图组件是基于swiper插件，所以配置slides的属性也是基于swiper的，但是默认配置后我们会发现轮播图刚开始会自动轮播，当用户手动滑动一会后，轮播图就不会自动轮播图了，下面我们看看ionic slides轮播图不自动轮播解决方案。

methods: {
    ionSlideTouchEnd(e: any) {    
      e.srcElement.startAutoplay();
    },
},
setup() {
    const slideOpts = {
      initialSlide: 1,
      speed: 400,
      loop: true,
      autoplay: {
        delay: 2000,
      },
    };
    return {     
      slideOpts,
    };
  },  

<ion-slides
        ref="slide"
        pager="true"
        :options="slideOpts"
        @ionSlideTouchEnd="ionSlideTouchEnd"
      >
        <ion-slide>
          <img src="/assets/images/slide01.png" />
        </ion-slide>
        <ion-slide>
          <img src="/assets/images/slide02.png" />
        </ion-slide>
        <ion-slide>
          <img src="/assets/images/slide03.png" />
        </ion-slide>
 </ion-slides>