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 组件更新历史 ...
随机推荐
- AWS Cloud Practioner 官方课程笔记 - Part 1
课程笔记: 1. 3种访问AWS服务的方式: GUI, CLI, SDK 前两种是用户用来访问的,SDK可以让程序调用去访问服务. 2. core services 以及通用的use cases Am ...
- oracle--goldengate安装实例
goldengate命令汉语解析地址:https://blog.csdn.net/eadela/article/details/102668879 实例地址:https://www.jianshu.c ...
- C语言I作业12——学习总结
1.我学到的内容 二.我的收获 作业 链接 第一次作业 https://www.cnblogs.com/liuxiangjiang/p/11579877.html 第二次作业 https://www. ...
- 【转载】如何编写ROS的第一个程序hello_world
目录 1.工作空间的创建 2.功能包的创建 3.功能包的源代码编写 4.功能包的编译配置 5.功能包的编译 6.功能包的启动运行 既然ROS已经成功安装好了,大家一定很想亲自动动手编一个通过起手式例程 ...
- CENTOS6.5 编译安装MySQL5.7.14
前言 mysql5.7.14 编译安装在自定义文件路径下 下载安装包 配置安装环境 编译安装 cmake \ -DCMAKE_INSTALL_PREFIX=/data/db5714 \ -DMYSQL ...
- STM32 RTC
目前较为实用的RTC时钟源选择的是:32.768k LSE 低速外部时钟: 不建议实用LSI,精度不高,对时间精度要求不高的可以考虑实用LSI时钟源.数据手册上电气特性的数据:
- POJ-1064.Cablemaster.(二分法枚举值求最优值)
题目链接 本题大意:给你n个长度为value[ i ]的长木板,让你切割成为等长的k份,问你切割的最大长度是多少. 本题思路:其实很容易可以想到先找到一个上界和一个下界,开始枚举里面的所有长度,取最长 ...
- 关于java的数组
一定要写成 int[] arr = new int[30] 这样每个元素默认为0; 介样子的 如果写成 int[] arr = {1,2,3,4}; 那么他的长度就是4
- 2.golang应用目录结构和GOPATH概念
golang 语言有一个GOPATH的概念就是当前工作目录 [root@localhost golang_test]# tree . ├── bin │ └── hello ├── first.g ...
- HNUSTOJ-1689 送外卖(TSP问题)
1698: 送外卖 时间限制: 1 Sec 内存限制: 128 MB 提交: 115 解决: 24 [提交][状态][讨论版] 题目描述 在美团和饿了么大行其道的今天,囊中羞涩的小周和小美,也随大 ...