ionic组件-Slides轮播图

最新推荐文章于 2024-08-17 20:45:45 发布

求财专用糖

最新推荐文章于 2024-08-17 20:45:45 发布

阅读量978

点赞数

分类专栏： Angular 文章标签： angular 前端

本文链接：https://blog.csdn.net/qq_41768447/article/details/104948474

版权

Angular 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Slides轮播图组件

ionic中的轮播图组件是基于swiper插件，所以配置slides的属性需要在swiper的API中找；

Swiper触摸滑动插件：https://www.swiper.com.cn/api/index.html

【ion-slides】：自动播放轮播图

【[options]="slidesOpts"】：绑定自动轮播属性

ts代码如下：

  slidesOpts:object={
    eddect:'flip',//轮播效果
    autoplay:{
      delay:2000,  //自动轮播时间
    },
    loop:true //开启循环
  }

【(ionSlideTouchEnd)="slindDidchange()"】：手动滑动后轮播图不自动轮播的解决方法

Ts代码：

//1、在html中给ion-slides标签取名#slide1，用以获取slide对象；
//2、引入ViewChild ；
import { Component, OnInit, ViewChild } from '@angular/core';
//3、在class中通过ViewChild获取slide对象 ；
  @ViewChild('slide1',{static:true}) slide1;
//3、编写轮播图不自动轮播的方法；
  slindDidchange(){
    console.log('111');
    this.slide1.startAutoplay();
  }

HTML代码如下：

<ion-content>
  <ion-slides #slide1 [options]="slidesOpts" (ionSlideTouchEnd)="slindDidchange()">
    <ion-slide>
      <img src="assets/icon/轮播1.png" alt="轮播图1">
    </ion-slide>
    <ion-slide>
      <img src="assets/icon/轮播2.png" alt="轮播图1">
    </ion-slide>
    <ion-slide>
      <img src="assets/icon/轮播3.png" alt="轮播图1">
    </ion-slide>
  </ion-slides>

【ion-slides】：点击按钮播放轮播图

【(click)="slidePrev()"】：点击跳转到下一页

Ts代码：

//1、在html中给ion-slides标签取名#slide2，用以获取slide对象；
//2、引入ViewChild ；
import { Component, OnInit, ViewChild } from '@angular/core';
//3、在class中通过ViewChild获取slide对象 ；
  @ViewChild('slide2',{static:true}) slide2;
//4、编写轮播图点击跳转到下一页的方法；
  slidePrev(){
    this.slide2.slidePrev(); //触发方法轮播到上一页
  }
//5、编写轮播图点击跳转到上一页的方法；
  slideNext(){
    this.slide2.slideNext();  //触发方法轮播到下一页
  }

HTML代码如下：

  <ion-slides #slide2>
    <ion-slide>
      <img src="assets/icon/轮播1.png" alt="轮播图1">
    </ion-slide>
    <ion-slide>
      <img src="assets/icon/轮播3.png" alt="轮播图1">
    </ion-slide>
    <ion-slide>
      <img src="assets/icon/轮播2.png" alt="轮播图1">
    </ion-slide>
    <ion-slide>
      <img src="assets/icon/风景.jpg" alt="轮播图1">
    </ion-slide>
  </ion-slides>
  <ion-button (click)="slideNext()" shape="round">
    点击按钮跳转到下一页
  </ion-button>
  
  <ion-button (click)="slidePrev()" >
    点击按钮跳转到上一页
  </ion-button>