本文主要讲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。
文章评论