1、页面组件定义
<ion-content>
<!--轮播图
#slide1 : 为组件ID
[options]="slidesOpts":对应ts中配置的对象slidesOpts,属于组件属性配置
*ngFor="let item of slidesList" :获取后台ts中传递进来的数据
*(ionSlideTouchEnd)="slideTouchEnd()": 手动滑动结束后出发的方法
-->
<ion-slides pager="true" #slide1 [options]="slidesOpts" (ionSlideTouchEnd)="slideTouchEnd()">
<ion-slide *ngFor="let item of slidesList">
<img [src]="item.pic" />
</ion-slide>
</ion-slides>
</ion-content>
2、数据来源
2.1 图片已放入到src/assets文件下
2.2 在tab1的ts文件中编辑逻辑
@ViewChild('slide1') slide1; //获取页面中id为slide1的组件,前提需要在import中引入ViewChild
//轮播图的属性
public slidesOpts={
speed:400,//一页到下一页的时间
autoplay: {
delay: 2000,//多久轮播一遍
},
loop:true //是否循环
}
public slidesList:any[]=[];
constructor(){
//轮播图片数据来源
for(var i=1;i<=3;i++){
this.slidesList.push({
pic:'assets/slide0'+i+'.png',
url:'',
})
}
}
//手动滑动完成
slideTouchEnd(){
this.slide1.startAutoplay();//设置为自动轮播
}
3、设置其CSS(在tab1的css文件中)
//轮播图的Css控制图片大小
ion-slide{
width: 100%;
height: 150px;
overflow: hidden;
img{
max-width: 100%;
}
}