0.1.4 • Published 7 years ago
iwe7 swiper
| 组件 | 说明 | 类型 | 使用 |
|---|
| swiper-outlet | 容器 | Component | element |
| swiperItem | slide模板 | Directive | ng-template |
| swiperDot | dot模板 | Directive | ng-template |
swiper-outlet
| 输入 | 默认 | 类型 |
|---|
| hasDot | true | boolean |
| loop | true | boolean |
| click | true | boolean |
| autoPlay | true | boolean |
| scrollX | true | boolean |
| scrollY | false | boolean |
| interval | 4000 | number |
| threshold | 0.3 | number |
| speed | 400 | number |
| list | [] | array |
<swiper-outlet [list]="list"></swiper-outlet>
<button mat-flat-button (click)="showDialogX()">showDialogX</button>
<button mat-flat-button (click)="showDialogY()">showDialogY</button>
<ng-template #tplX>
<swiper-outlet [list]="list"></swiper-outlet>
</ng-template>
<ng-template #tplY>
<swiper-outlet scrollY [list]="list"></swiper-outlet>
</ng-template>
list: any[] = [{
image: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg'
}, {
image: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg'
}];
showDialogX() {
this.getCyc('ngAfterViewInit').subscribe(res => {
const dialogRef = this.dialog.open(this.tplX);
});
}
showDialogY() {
this.getCyc('ngAfterViewInit').subscribe(res => {
const dialogRef = this.dialog.open(this.tplY);
});
}