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

心已赠人 2023-02-20 13:33 5阅读 0赞

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

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

我们使用swiper

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

### Html代码 ###

### 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();
      }
    
    }