ionic + angular 组件ion-slide 轮播组件使用

初期使用此组间时真是头疼的很，最后发现是组件参数定义的位置时机不对造成的问题。。。。

其实搞清楚angular的工作原理就好。。

我们使用swiper

npm install swiper

// 再要使用的代码里引用
import Swiper from 'swiper';

 

Html代码

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let item of items">
          <img class="slideImg" src="{{item.ImageLink}}">
        </div>
      </div>
      <div class="swiper-pagination"></div>
</div>

ts代码

import Swiper from 'swiper';


@Component({
  selector: 'app-imagepreview',
  templateUrl: './imagepreview.component.html',
  styleUrls: ['./imagepreview.component.scss'],
})
export class ImagepreviewComponent implements OnInit {
 public slide: Swiper;
 
  constructor(
    private navParams: NavParams,
    private modal: ModalController,
  ) { }

  ngOnInit() {
    // 拿到数据后在初始化
     this.items = res.data;
     this.change.detectChanges();
     this.initSwiper();
     this.change.detectChanges();
  }

 public initSwiper() {
    if (this.slide) {
      this.slide.destroy(false, true)
    }
    this.slide = new Swiper('.swiper-container', {
      initialSlide: 0,
      loop: true,
      slidesPerView: 1,
      speed: 2000,
      on: {
        click: () => {
          this.onTap(this.items[this.slide.realIndex]);
        },
      },
      spaceBetween: 10,
      autoplay: true,
      observer: true,
      observeParents: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
    this.slide.on('slideChangeTransitionEnd', function () {
      this.autoplay.run();
    });
  }

  ionViewDidEnter() {
    if (this.slide) {
      this.initSwiper();
    }
  }

  ionViewDidLeave() {
    // console.log('homeview leave');
    this.slide.autoplay.stop();
  }

}