Ionic2 slides的使用
来源:互联网 发布:雪白血红 张正隆知乎 编辑:程序博客网 时间:2024/06/05 02:15
<ion-slides pager> <ion-slide style="background-color: green"> <h2>Slide 1</h2> </ion-slide> <ion-slide style="background-color: blue"> <h2>Slide 2</h2> </ion-slide> <ion-slide style="background-color: red"> <h2>Slide 3</h2> </ion-slide></ion-slides>
上面是一段非常简单的<ion-slides>
的使用,很简单<ion-slides>
里面嵌套n个<ion-slide>
.
假设我们在一个@Component
中已经添加下面的模板:
<ion-slides> <ion-slide> <h1>Slide 1</h1> </ion-slide> <ion-slide> <h1>Slide 2</h1> </ion-slide></ion-slides>
之后你可以在某个页面的class中使用@ViewChild()
去分配Slides到该函数的slides
属性中。现在我们就可以调用Slides中任何方法了。比如我们可以使用slideTo()
方法导航到一个定义好的button按钮。之后我们调用goToSlide()
方法和导航到第三个滑动页。
import { ViewChild } from '@angular/core';import { Slides } from 'ionic-angular';//引入Slides模块class MyPage { @ViewChild(Slides) slides: Slides; //在目标子页面中注入Slides模块 goToSlide() { //滑动方法, this.slides.slideTo(2, 500);//第三个,500毫秒。 }}
我们也可以增加事件到<ion-sliders>
元素上,比如我们现在添加一个ionSlideDidChange
事件。 <ion-slides (ionSlideDidChange)="slideChanged()">
后面我们来定义slideChanged()
这个触发函数:
slideChanged() { let currentIndex = this.slides.getActiveIndex(); console.log("Current index is", currentIndex); }
<ion-slides>
标签的附件属性
autoplay
值是number
,自动播放功能,默认值是null,也不自动翻页,如果赋值的话,就会自动播放,以毫秒为单位,不循环。
control
值是slides 传入一个或者一组Slide实例化对象,通过当前slide来控制这些slides.
dir
值是字符串形式 如果dir属性值等于rtl
interal_rtl等于ture;
direction
默认值是"horizontal"
,还可以设置成“vertical"
;
effect
用于设置动画效果,默认值是”slide”,其他值有:slide, fade, cube, coverflow, flip
;
initialSlide
设置slide初始索引值,默认值是0
;
loop
默认false,设置成true
,就会无限循环。
pager
默认false,设置成true
,底部就会有小点点。
paginationType
楼上pager的样式,默认值为‘bullets’
,‘fraction’, ‘progress’
parallax
如果设置为true,
开发者可以在slider里面使用parallaxed
元素;
slidesPerView
默认值是1
,
spaceBetween
每个slide之间的距离 默认值0
;
speed
滑动用时,默认值300
;
zoom
默认false
,如果设置为true
,
- Ionic2 slides的使用
- ionic2 使用slides制作滑动效果的类型选择栏
- Ionic2关于Slides的一些坑
- Ionic2-解决在使用slides的时候autoplay、loop等Input Properties报错问题
- ionic2 使用tabs+slides实现滑动切换页面效果
- Ionic2自定义组件的使用
- ionic2 百度地图的使用
- ionic2/ionic3 弹框Alerts、滑动框Slides 用法小结
- ionic2框架pouchDB离线数据库的使用
- Ionic2中使用ECharts3
- Ionic2 使用自定义图标
- ionic2 使用自定义icon
- 使用ionic2开发项目
- ionic2中ion-slides轮播图报错Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
- 批量下载VLDB07的slides!
- 推荐Hadoop Stack的Slides
- ionic2 使用自定义图片作为tabbar的icon
- 使用ionic2移动应用在IOS中遇到的问题
- linux查看日志文件内容
- docker+rails+postgresql+redis+puma+nginx
- Cookie/Session机制详解
- 安卓推送这件小事
- Linux磁盘管理.md
- Ionic2 slides的使用
- Struts2中json的使用总结
- PTA 5-22龟兔赛跑
- pg limit限制返回的行
- 四次挥手
- Mongodb Failed: lost connection to server,导入大量数据报错
- poj 2653 Pick-up sticks(判断线段相交)
- ASP.NET 学习笔记
- Common Clock Framework系统结构