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

发布于 3 年前 作者 phonegap100 504 次浏览 最后一次编辑是 3 年前 来自 分享

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>
回到顶部