全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

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

2020年10月27日 514点热度 0人点赞 0条评论

 

本文主要讲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见下图:

bug1

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

bug2

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

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 踩坑
最后更新:2020年10月27日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号