Ionic Vue中的Slides轮播图组件

Ionic中的轮播图组件是基于swiper插件，所以配置slides的属性需要在swiper的api中找 Swiper Api：http://idangero.us/swiper/api/

1、配置slides的属性

setup() {
    const slideOpts = {
      initialSlide: 1,
      speed: 400,
      loop: true,
      autoplay: {
        delay: 2000,
      },
    };
    return {     
      slideOpts,
    };
  },  

2、ion-slide实现轮播图

<ion-slides pager="true" :options="slideOpts">
       <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>