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 组件的使用的更多相关文章
- Netty学习笔记(二)——netty组件及其用法
1.Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. 原生NIO存在的问题 1) NIO的类库和API繁杂,使用麻烦:需要熟练掌握Selector.Se ...
- Scala学习教程笔记二之函数式编程、Object对象、伴生对象、继承、Trait、
1:Scala之函数式编程学习笔记: :Scala函数式编程学习: 1.1:Scala定义一个简单的类,包含field以及方法,创建类的对象,并且调用其方法: class User { private ...
- Unityclient框架笔记二(组件实体开发模式的思考)
Unity的Entity-Component-System实现的很美丽,很灵活.许多文章也对这样的组件实体的开发模式倍加推崇.由于它契合这么一条规则:优先使用组合而不是继承. 可是实际开发过程中,限制 ...
- 剑指offer学习读书笔记--二维数组中的查找
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都是按照从上到下递增的顺序排序.请设计一个函数,输入这样的一个二维数组和一个整数,判断数组是否含有这个整数. 1 2 8 9 2 4 9 1 ...
- ionic学习使用笔记(一) 版本更新及创建项目时遇到的问题解决
最近开始用ionic开发项目,虽然去年的时候用ionic 2.0 开发过公司的项目,不过现在的ionic已经升级到了ionic framework 3.0 了.而且还有个 ionic-cli . 使用 ...
- 深度学习入门教程UFLDL学习实验笔记二:使用向量化对MNIST数据集做稀疏自编码
今天来做UFLDL的第二个实验,向量化.我们都知道,在matlab里面基本上如果使用for循环,程序是会慢的一逼的(可以说基本就运行不下去)所以在这呢,我们需要对程序进行向量化的处理,所谓向量化就是将 ...
- U3D学习使用笔记(二)
1.在移动端www.texture使用时不能实时加载纹理,www.LoadImageIntoTexture使用没问题 2.public FaceFeature FaceFeatureData ...
- ionic slide组件使用
ionic学习使用笔记 slide 组件的使用 开始做的时候,遇到了个要用ionic实现 有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又 ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
随机推荐
- loadrunner+win2003虚拟机的安装
lr11的安装和使用 准备材料: 1.win2003镜像下载 2.虚拟机下载 3.lr11的下载 一.创建win2003虚拟机 打开虚拟机,选择win2003系统镜像,输入密钥(可百度),用户名密码( ...
- 2 Vue.js基础
1 简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JS屏蔽鼠标右键
//方法1: function stop() { return false;}document.oncontextmenu = stop;//方法2: window.document.oncon ...
- Java 实现Excel的简单读取操作
JAVA实现Excel表单的简单读取操作 实现Excel表单的简单读取操作,首先要导入相关的jar包: 如图所示: 此处贴上代码: public static List<List<Stri ...
- 解决:”ssh-keygen 不是内部或外部命令“ 的问题
相信大家在 码云生成/添加SSH公钥的过程中遇到一个比较常见的问题, 在cmd,命令行输入 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" ; xxx ...
- Segment tree Beats
Segment tree Beats Segment tree Beats,吉司机线段树,主要是关于如何用线段树实现区间取min/max.我们先看一道例题: HDU5306 Gorgeous Sequ ...
- 2019 Multi-University Training Contest 2 - 1009 - 回文自动机
http://acm.hdu.edu.cn/showproblem.php?pid=6599 有好几种实现方式,首先都是用回文自动机统计好回文串的个数. 记得把每个节点的cnt加到他的fail上,因为 ...
- docker相关知识
DevOps 是一个完整的面向IT运维的工作流,以 IT 自动化以及持续集成(CI).持续部署(CD)为基础,来优化程式开发.测试.系统运维等所有环节.突出重视软件开发人员和运维人员的沟通合作,通过自 ...
- AspNetCore使用MySQL
既然NetCore开源,那么也使用开源的MySQL的数据库呢?当然NetCore不止单单配MSSQL数据库而已.今天我来讲解NetCore怎么使用MySQL进行开发. 首先新建一个NetCore项目 ...
- web前端工程化
目标 1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用 1.模块化的分类 A.浏览器端的模块化 1).A ...