ionic slide组件使用
ionic学习使用笔记 slide 组件的使用
开始做的时候,遇到了个要用ionic实现
有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条。
之前使用jQuery来实现的话,其实就是一个向左滑动的图片切换。
想着这个功能其实还是蛮常见的,ionic的framework应该能实现。然后就查看了一下文档,发现slides是可以实现的。
一开始直接粘贴了文档里面的代码,想着能自己直接修改样式来实现,设置slide宽度为20%,每次可展示5个序列。但是这样修改的话,使用this.slides.currentIndex获取到的值,是当页的值,而不是希望的slide的序列。
然后不得不仔细查看文档,然后就看到了这么个属性
slidesPerView | number |
Slides per view. Slides visible at the same time. Default: |
使用方法如下:
this.slides.slidesPerView = 5;
页面上就可以同时展现5个序列了。
其他属性如下:
Attr | Type | Details | 中文 |
---|---|---|---|
autoplay | number |
Delay between transitions (in milliseconds). If this parameter is not passed, autoplay is disabled. Default does not have a value and does not autoplay. Default: |
是否自动播放 |
centeredSlides | boolean |
Center a slide in the middle of the screen. |
在页面居中 |
control | Slides |
Pass another Slides instance or array of Slides instances that should be controlled by this Slides instance. Default: |
|
dir | string |
If dir attribute is equal to rtl, set interal _rtl to true; |
设置滚动的方向,从左还是从右 |
direction | string |
Swipe direction: 'horizontal' or 'vertical'. Default: |
水平还是竖直方向的滚动 |
effect | string |
The animation effect of the slides. Possible values are: |
切换的方式 |
initialSlide | number |
Index number of initial slide. Default: |
初始状态从第几个slide开始 |
loop | boolean |
If true, continuously loop from the last slide to the first slide. |
滚动到最后一个slide时是否切换到第一个 |
pager | boolean |
If true, show the pager. |
是否在下方展示当前的序列。即一般图片切换时的下方的圆点 |
paginationType | string |
Type of pagination. Possible values are: |
与上面一项对应,设置其格式 |
parallax | boolean |
If true, allows you to use "parallaxed" elements inside of slider. |
|
slidesPerView | number |
Slides per view. Slides visible at the same time. Default: |
设置每次展现几个slide |
spaceBetween | number |
Distance between slides in px. Default: |
slide的间距 |
speed | number |
Duration of transition between slides (in milliseconds). Default: |
滚动速度 |
zoom | boolean |
If true, enables zooming functionality. |
https://ionicframework.com/docs/api/components/slides/Slides/#resize
ionic slide组件使用的更多相关文章
- 好的组件,无须太复杂 – KISSY Slide 组件简介
KISSY Slide 组件首页:http://gallery.kissyui.com/slide/1.1/guide/index.html V1.1 New Featurs Slide是一个幻灯切换 ...
- Ionic 常用组件解析
Ionic 常用组件解析 $ionicModal(弹出窗口): //创建一个窗口 //此处注意目录的起始位置为app $ionicModal.fromTemplateUrl('app/security ...
- ionic学习使用笔记(二) slide 组件的使用
开始做的时候,遇到了个要用ionic实现 有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又不能有滚动条. 之前使用jQuery来实现的话,其实 ...
- 如何把一个vue组件改为ionic/angular组件
同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- ionic创建组件、页面或者过滤器
ionic可以直接 用命令来创建组件.页面或者过滤器. 在ionic项目根目录打开命令窗口.输入下列命令: ionic g page pageName //创建新页面 ionic g componen ...
- 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记(三)
十五.ionic路由 1.ionic中内联模板介绍 使用内联模板内联模板的使用,常见的有几种情况.(1) 使用ng-include指令可以利用ng-include指令在HTML中直接使用内联模板,例如 ...
- [转]Ionic系列——CodePen上的优秀Ionic_Demo
本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides ...
- BizTalk动手实验(十一)自定义开发管道组件
1 课程简介 通过本课程熟悉自定义开始管道组件的流程.各组件接口的功能作用以及自定义管道. 本场景为开发一个消息ZIP压缩的发送管道组件. 2 准备工作 1. 熟悉管道组件各阶段组成 2. 下载Ion ...
随机推荐
- ajax异步加载分页评论带点赞功能
<script type="text/javascript" src="__ROOT__/Index/Tpl/Public/js/jquery.js"&g ...
- MySQL: InnoDB的并发控制,锁,事务模型
一.并发控制 为啥要进行并发控制? 并发的任务对同一个临界资源进行操作,如果不采取措施,可能导致不一致,故必须进行并发控制(Concurrency Control). 技术上,通常如何进行并发控制? ...
- 【FAQ】P3. 为什么 torch.cuda.is_available() 是 False
为什么 torch.cuda.is_available() 是 False torch.cuda.is_available(),这个指令的作用是看,你电脑的 GPU 能否被 PyTorch 调用. 如 ...
- 手写spring事务框架, 揭秘AOP实现原理。
AOP面向切面编程:主要是通过切面类来提高代码的复用,降低业务代码的耦合性,从而提高开发效率.主要的功能是:日志记录,性能统计,安全控制,事务处理,异常处理等等. AOP实现原理:aop是通过cgli ...
- nginx在windows下配置反向代理
转自:https://blog.csdn.net/comeonyangzi/article/details/72466310 下载地址:http://nginx.org/download/ 下载后直接 ...
- idea解除版本控制
解除版本控制删除两个文件: 1.idea中删除vcs.xml 2.在项目文件夹中删除.git 参考:https://blog.csdn.net/qq_37999340/article/details/ ...
- ukhj
SQL解析顺序: 七种Join图:
- Django之cookie 和session
---恢复内容开始--- 一.cookie 前戏.cookie 的由来 由于http协议是无状态的 无法记录用户状态 cookie就是保存在客户端浏览器上的键值对 工作原理:当你登陆成功之后 浏览器会 ...
- ELK7.X中配置x-pack
ELK7.X中配置x-pack 1.X-Pack简介 X-Pack是一个Elastic Stack的扩展,将安全,警报,监视,报告和图形功能包含在一个易于安装的软件包中.虽然elasticsearch ...
- verilog版插值
开发环境:IDE:LIBERO 9.0(ACTEL公司的)芯片:AFS600 (BGA256),是混合系列的FPGA仿真软件:modelsim atcel 6.5d综合软件:synplify pr ...