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

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

1、#slide1给ion-slides定义一个唯一的id  并监听 ionSlideTouchEnd

  <ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="slideDidChange()">
    <ion-slide>
      <img src="/assets/slide01.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/slide02.png" alt="">
    </ion-slide>
  </ion-slides>

2、找到业务逻辑 引入ViewChild，并获取dom节点

import { Component, OnInit,ViewChild} from '@angular/core';

@ViewChild('slide1') slide1;

3、ionSlideTouchEnd后触发slideDidChange，在slideDidChange方法中调用slide对象进行轮播

 //手动滑动后轮播图不自动轮播的解决方法
  slideDidChange(){

    console.log('111');
    this.slide1.startAutoplay();
  }

完整业务逻辑代码：

import { Component, OnInit,ViewChild} from '@angular/core';

@Component({
  selector: 'app-slides',
  templateUrl: './slides.page.html',
  styleUrls: ['./slides.page.scss'],
})
export class SlidesPage implements OnInit { 


  @ViewChild('slide1') slide1;

  slideOpts = {
    effect: 'flip',  //轮播效果
    autoplay: {
      delay: 2000,
    },
    loop:true
  };
  constructor() { }

  ngOnInit() {
  }

  //手动滑动后轮播图不自动轮播的解决方法
  slideDidChange(){

    console.log('111');
    this.slide1.startAutoplay();
  }
 
 
}

这就是ionic5 slides轮播图不自动轮播解决方案的使用方法,ionic5 slides轮播图不自动轮播解决方案就给大家先介绍到这里，希望对你有帮助

更多ionic5 slides轮播图不自动轮播解决方案的使用教程：https://www.itying.com/goods-1067.html