初期使用此组间时真是头疼的很,最后发现是组件参数定义的位置时机不对造成的问题。。。。
其实搞清楚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();
}
}