ion-slides的奇葩bug的奇葩解法，想破脑袋想出来这么一个歪主意，我尽力了

本文主要讲ion-slides轮播图点击无法跳转的解决办法

在Ionic里面实现轮播图是一件很简单的事情，只需要使用一个ion-slides就行了。如果我们再从后台的接口去取一点图片数据来填充轮播图，那么一个动态的轮播图就这么实现了。

我今天要说的问题当然不是这么简单的。我的问题是当我要给轮播图添加点击效果的时候遇到的问题。我希望用户点击某一张轮播图过后，就可以根据轮播图对应的链接跳转到对应的页面。我原本以为只是添加一个点击方法这么简单的事情，但事实却不是这样的。当我直接添加一个(click)过后，点击轮播图并没有反应。

经过多方查阅资料，我知道这是一个普遍存在的问题，下面是我的解决方案：

html文件如下：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-slides pager #mySlider [options]="slideOpts" (click)="handleClick()">
    <ion-slide *ngFor="let item of bannerList">
      <h2>{{item.name}}</h2>
    </ion-slide>
  </ion-slides>
</ion-content>

这里的ion-slides我定义了一个#mySlider因为我要通过viewchild来获取这个节点。然后[options]就是定义轮播图属性的，这里就不说了。handleClick()就是点击轮播图过后执行的方法。

scss文件如下：

ion-slides{
    height: 500px;
    background-color: aquamarine;
}

这个文件可以忽略。

ts文件如下：

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

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  @ViewChild('mySlider') slides: IonSlides;
  slideOpts = {
    initialSlide: 1,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false
    },
    loop: true
  };
  bannerList = [
    {
      name: 'AAAAAAAAAAA',
      id: 1
    },
    {
      name: 'BBBBBBBBBBB',
      id: 2
    },
    {
      name: 'CCCCCCCCCCC',
      id: 3
    },
    {
      name: 'DDDDDDDDDDD',
      id: 4
    }
  ];
  constructor() {}

  handleClick(){
    this.slides.getActiveIndex().then((data) => {
      // console.log(data);
      // 这里是最奇葩的地方。当我们点击的图片是这个轮播数组中的第一张图片的时候，如果我们直接打印data的话，发现打印出来的值是5，刚好是这个bannerList的长		度加1
      // 当我们点击第二张图片的时候，打印出来的值却是2
      // 于是我们就可以通过下面的判断来获取图片的id属性了
      if (data === this.bannerList.length + 1) {
        console.log(this.bannerList[0].id);
      } else {
        console.log(this.bannerList[data - 1].id);
      }
    });
  }
}

这个文件里面我定义了一个bannerList数组来模拟我们从后端获取到的数据。然后handleClick方法就是负责打印每一个轮播图item的ID。如果能正确打印id的话，我们就能够获取item携带的任何数据。

附：

奇葩的bug见下图：

当我点击第一张图片的时候，直接console.log(data)的话，打印出的值是5。

当我点击第二张图片的时候，直接console.log(data)的话，打印出的值是2。