ionic5中轮播图ion-slides、ion-slide的使用

参考文档

对于轮播图的实现,我们可以参考https://ionicframework.com/docs/api/slides的相关文档,这里有
属性:
在这里插入图片描述
事件:在这里插入图片描述
方法:在这里插入图片描述

准备

新建页面

首先我们在项目中使用ionic g page slides命令来创建一个用于展示轮播图的页面
在这里插入图片描述
然后在tab1页面新建一个按钮用于跳转到slides页面
tab1.page.html:

<ion-button [routerLink]="['/segment']">
    跳转到segment页面
</ion-button>

图片准备

我们准备了四张图片放在/assets目录下用于轮播图使用
在这里插入图片描述

简单轮播图实现

我们使用ion-slides、ion-slide标签来实现轮播的效果

<ion-slides pager="true">
  <ion-slide>
    <ion-img src="/assets/slide1.png"></ion-img>
  </ion-slide>
  <ion-slide>
    <ion-img src="/assets/slide2.png"></ion-img>
  </ion-slide>
</ion-slides>

界面展示效果:
在这里插入图片描述
我们可以手动滑动实现图片切换

实现自动轮播的功能

定义参数

首先我们在slides.page.ts中定义自动轮播的各种参数,如轮播效果、轮播间隔等等
slides.page.ts

slideOpts={
  effect:"flip", //轮播效果
  autoplay:{
    delay:2000, //两秒钟自动轮播
  },
  loop:true //循环
}

界面上使用该参数

我们在界面上使用[options]="slideOpts"来实现该轮播图使用这些参数
在这里插入图片描述
接下来我们就可以看到轮播图循环两秒钟切换
但是,当我们在轮播的时候手动滑了一下后,自动轮播效果就会自动停止,这个问题我们怎么解决呢?

自动轮播干扰时停止问题的解决

对于这个问题,我们可以用一下步骤解决

定义名称#slide

这个类似于html中的id
在这里插入图片描述

引入ViewChild获取slide对象

slides.page.ts:
首先映入ViewChild组件
在这里插入图片描述
然后使用@ViewChild(‘slide1’) slide;获取轮播图这个组件
在这里插入图片描述

实现点击结束自动轮播

使用ionSlideTouchEnd事件和startAutoplay方法来实现点击结束后触发自动轮播事件
slides.page.html:
在这里插入图片描述
slides.page.ts:

 //手动滑动轮播自动停止滑动的解决办法
ionSlideTouchEnd() {
  this.slide1.startAutoplay();//开始自动轮播
}

这样,在轮播时,即使我们手动滑动都不会影响轮播图自动轮播

实现点击按钮上下轮播图切换

实现上下切户,就需要用到slideNext和slidePrev方法了
slides.page.html:

<ion-slides pager="true" #slide2>
  <ion-slide>
    <ion-img src="/assets/slide1.png"></ion-img>
  </ion-slide>
  <ion-slide>
    <ion-img src="/assets/slide2.png"></ion-img>
  </ion-slide>
  <ion-slide>
    <ion-img src="/assets/slide3.png"></ion-img>
  </ion-slide>
  <ion-slide>
    <ion-img src="/assets/slide4.png"></ion-img>
  </ion-slide>
</ion-slides>

<ion-button (click)="slidePrev()" >
  点击按钮跳转到上一页
</ion-button>
<ion-button (click)="slideNext()" >
    点击按钮跳转到下一页
</ion-button>

同样,我们定义了一组轮播图,这个轮播图定义名称为slide2,然后在下面增加了两个按钮,一个用于上翻,一个用于下翻。

接下来我们就要在ts文件中进行定义了
在这里插入图片描述

在这里插入图片描述
首先,我们需要引入ViewChild组件,然后获取slide2对象,这个之前说到过
接下来,我们就需要定义两个方法slideNext和slidePrev方法用于下翻和上翻了

slideNext() {
 this.slide2.slideNext();//触发方法轮播到下一页
}

slidePrev() {
  this.slide2.slidePrev();//触发方法轮播到上一页
}

这样就可以实现点击按钮上下翻页了

其他的一些轮播图组件的使用方法可以参考官方文档https://ionicframework.com/docs/api/slides,我这里只是单独拿出其中一些时间或方法来展示下

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值