ionic4之ion-sliders

<ion-content class="details_">
    <img class="courimg_" src="assets/images/courimg.png">
    <ol class="swicth-tab">
        <li [ngClass]="{'tab-btn':true,'active':item.id == slideOpts.initialSlide}" *ngFor="let item of swichtab"><span (click)="slideToFn(item.id)" class="cont_">{{item.label}}<em *ngIf="item.id==3">(23)</em></span></li>
    </ol>
    <ion-slides pager="false" mode="md" [options]="slideOpts" (ionSlideDidChange)="onSlideDidChange($event)">
        <ion-slide>
            <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 3</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 4</h1>
        </ion-slide>
    </ion-slides>
</ion-content>

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  @ViewChild(IonSlides) slides: IonSlides;
	swichtab = [{"label":"介紹","id":"0"},{"label":"目錄","id":"1"},{"label":"成果","id":"2"},{"label":"評論","id":"3"}]; //tab切换样式
	slideOpts = {
    initialSlide: 0, //默认页
    speed: 400
  }
  constructor() { }

  ngOnInit() {
		
  }
	onSlideDidChange(event){ //swiper滑动以后的变化
		// console.log(event.target.swiper.activeIndex)
		//getActiveIndex() => Promise<number>
		this.slides.getActiveIndex().then(number => {
			this.slideOpts.initialSlide = number; //重置默认页
		});
	}
	slideToFn(number){ //控制swiper跳转到指定页
		this.slides.slideTo(number);
	}
}

　　

转载于:https://www.cnblogs.com/mary-123/p/10900522.html