ionic5中轮播图ion-slides、ion-slide的使用
这里写目录标题
- 参考文档
- 准备
- 新建页面
- 图片准备
- 简单轮播图实现
- 实现自动轮播的功能
- 定义参数
- 界面上使用该参数
- 自动轮播干扰时停止问题的解决
- 定义名称#slide
- 引入ViewChild获取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,我这里只是单独拿出其中一些时间或方法来展示下
ionic5中轮播图ion-slides、ion-slide的使用相关推荐
- layui轮播图切换会有跳动_Layui中轮播图切换函数说明
### Layui中轮播图切换函数说明 ### ##### 官方文档 [链接][Link 1] ##### ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG ...
- 关于element-ui中轮播图手动切换轮播图片
文章目录 前言 一.关于element-ui中轮播图手动切换轮播图片 二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法 结尾 前言 在开发过程中发现项目中轮 ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- html中轮播图跳转,纯 CSS 实现轮播图
大家好,我是 Steven. 今集我们会尝试只用 HTML 和 CSS,实现基础的轮播图效果,当然会有一些功能的缺失,例如不能自动跳转,但我们来看看用 CSS 可以实现到多少. HTML 的部分 打开 ...
- bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
- 网站中轮播图的制作方法
制作思路 将轮播图分为三个部分,分别为视口区,滚动区和图片. 1.视口区.即可看见图片的地方,将其固定不动. 2.滚动区.该区域需要产生图片轮流出现的效果,因而需要给此区域添加动画效果.宽度为所有图片 ...
- html中轮播图中图片样式如何调,纯CSS3做轮播图基础样式设置
一,准备工作 轮播图的主要遇新是直朋能到分览思想: 1,让友,记基开前不接些前家我告对猿果水使钮控轮播的几张图片横向连成一片,默认是从上到下(如果图片像朋支不器几事为的时后级功发发来久都这样含制层是请 ...
- android中怎么实现轮播图,Android中轮播图的实现
在Android中想要实现轮播图,会用到ViewPager和其子控件PagerTabStrip(标题栏) 怎么样一步一步的去做到: 1.将View视图添加到集合中 public class MyAct ...
- HTML中轮播图里的圆点不充满,老师好,轮播图中的小点不显示
我设置了padding-botom 为40%还是不显示,请麻烦看一下这是什么问题呢 import { Swiper, SwiperItem } from "@/common/swiper&q ...
最新文章
- oracle下使用sql命令,ORACLE笔记(2)ORACLE 学习中用到的SQL命令
- 文巾解题 77. 组合
- Python 输入输出
- B站up主用AI还原李焕英 动态影像
- 分布式模式之Broker模式
- 在Oracle里,表的别名不能用as,列的别名可以用as
- SpringCloud集成Security安全(Config配置中心)
- lsqcurvefit拟合结果为复数_使用科学计算器计算复数与相量(提高篇)
- Python基础篇:用Python简简单单写个星空大战,可不能用来摸鱼啊~
- win10cmd重置系统_win10命令提示符一键还原修复系统
- 2022-2028全球姿势矫正器行业调研及趋势分析报告
- 互联网30年,总有人正年轻
- 博弈论大师---纳什
- win10 microsoft edge能上网,别的浏览器不能上网
- JDBC 第一章 JDBC概述
- 谈谈反爬虫“政策与对策”
- Python异常及处理
- 基于JAVA旅游景区预约管理系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署
- 利用IntelliJ IDEA与Maven开始你的Scala之旅
- 可以一键生成crud的php框架,关于Laravel+vue+admin一键生成CRUD代码
热门文章
- filco蓝牙不好用_FilcoMinilaAir蓝牙机械键盘使用感受,做工精细手感优良但并不完美...
- 单元测试、集成测试、系统测试、回归测试、用户验收测试简介
- 检测图片篡改困难?快来试试这款黑科技
- 2021年团体程序设计天梯赛-总决赛 L3-2 还原文件
- ARCGIS 模型 根据字段值批量导出矢量数据
- CSS-边框和边距详解
- No tracked branch configured for branch dev-rongtong or the branch doesn‘t exist.
- 程序员眼中的编程语言和操作系统
- 红米8A的root步骤(MIUI 11.0.10.0 稳定版 安卓9)
- iQOONeo6SE和红米k40区别 哪个好 iQOONeo6SE和红米k40哪个值得买 两者配置对比