ionic实现动态轮播图

温馨提示

Ionic和angular在不断发展，项目也在不断更新迭代，此文档必然是有时效性的，继而温馨提示读者在使用此文档时，注意项目架构。如有变化，请持续更新此文档。

• 一.所需资源

1. Ionic4

• 二.集成具体步骤
  2.html代码

<ion-slide *ngFor="let option of data ; let i=index ">

  <ion-card>

    学号：{{option?.code}}

  </ion-card>

</ion-slide>

3.ts代码
3.1 初始化
初始化方法：

/**

  * 初始化查询分组内的学生

  * @author '田成荣

  * @since 2019年1月11日

  */

  getData() {

    // 判断项目显示input狂--体重指数时HTML显示另两个input

 

    if (this.projectId === '011') {

      this.visable_HW = 1;

      this.visable_HW = 0;

    } else {

      this.visable_HW = 0;

      this.visable_HW = 1;

    }

    const projectId = this.projectId;

    this.groupId = this.routeInfo.snapshot.params['groupId'];

    this.groupName = this.routeInfo.snapshot.params['groupName'];

    this.studentId = this.routeInfo.snapshot.params['studentId'];

    console.log('----------projectId', projectId);

    this.batchNo = this.storage.get('BATCHNO').then((el) => {

      this.batchNo = el;

      console.log('groupId-----------------', this.groupId);

      console.log('batchNo-----------------', this.batchNo);

      const groupId = this.groupId;

      const batchNo = this.batchNo;

      const studentId = this.studentId;

      // tslint:disable-next-line:max-line-length

      switch (projectId) {

        case '011':

          this.projectName = '身高和体重';

          this.Unit = '';

          break;

        case '003':

          this.projectName = '肺活量';

          this.Unit = '毫升';

          break;

        case '004':

          this.projectName = '50米';

          this.Unit = '秒';

          break;

        case '005':

          this.projectName = '立定跳远';

          this.Unit = '米';

          break;

        case '006':

          this.projectName = '坐位体前屈';

          this.Unit = '厘米';

          break;

        case '007':

          this.projectName = '800米';

          this.Unit = '分.秒';

          break;

        case '008':

          this.projectName = '1000米';

          this.Unit = '分.秒';

          break;

        case '009':

          this.projectName = '仰卧起坐';

          this.Unit = '个';

          break;

        case '010':

          this.projectName = '引体向上';

          this.Unit = '个';

          break;

      }

      if (this.groupId !== undefined && this.groupId !== '') {

        const url = 'physical-web/singleProjectScore/selectScoreByGroupIdBatchProject/' + groupId + '/' + projectId + '/' + batchNo;

        console.log(url);

        this.http.get(url).subscribe(

          res => {

            if (res.json().code === '0000') {

              this.data = res.json().data;

              console.log('---------------data', this.data);

              for (let i = 0; i < this.data.length; i++) {

                if (projectId === '007' || projectId === '008') {

                  this.data[i].result = this.convertSecToMin(this.data[i].result);

                  // tslint:disable-next-line:max-line-length

                } else if (projectId === '005') { this.data[i].result = (Number(this.data[i].result) / 100).toString(); } else if (projectId === '003' || projectId === '009' || projectId === '010') {

                  this.data[i].result = Number(this.data[i].result).toFixed(0);

                } else {

                  this.data[i].result = this.data[i].result;

                }

              }

              this.queryStandard(projectId, this.data[0].gradeCode, this.data[0].sex);

            }

          }

        );

      } else {

        const url = 'physical-web/singleProjectScore/selectScoreByStudentIdBatchProject/' + studentId + '/' + projectId + '/' + batchNo;

        console.log(url);

        this.http.get(url).subscribe(

          res => {

            if (res.json().code === '0000') {

              this.data = res.json().data;

              console.log('---------------data', this.data);

              for (let i = 0; i < this.data.length; i++) {

                if (projectId === '007' || projectId === '008') {

                  this.data[i].result = this.convertSecToMin(this.data[i].result);

                  // tslint:disable-next-line:max-line-length

                } else if (projectId === '005') { this.data[i].result = (Number(this.data[i].result) / 100).toString(); } else if (projectId === '003' || projectId === '009' || projectId === '010') {

                  this.data[i].result = Number(this.data[i].result).toFixed(0);

                } else {

                  this.data[i].result = this.data[i].result;

                }

              }

              this.queryStandard(projectId, this.data[0].gradeCode, this.data[0].sex);

            }

          }

        );

      }

 

      this.getprojectRatio();

      console.log(el);

    });

    // this.studentId = this.activeRoute.snapshot.paramMap.get('studentId');

    console.log('val-----------------------', this.projectId);

  }

click事件：注意—>我是和侧边栏结合使用的，轮播图跳转到哪一页的方法写在了单击侧边栏里。

getCard(j: any) {

    let slides: any;

    slides = document.getElementById('slides');

    slides.slideTo(j, 0);

    // 点击后关闭。

    this.menu.close();

  }

4.效果图