前端实战之——幻灯片组件.docxVIP

前端实战之——幻灯片组件??幻灯片也是一种常见的UI表现方式，它从一组元素中选择一个投射到屏幕可视区域，用户 可以通过滑动方式（向左或向右）进行切换。??今天海文老师给大家先讲解一下关于幻灯片中的ion-slide-box指令。ion-slide-box可以做什么呢？它可以做启动切换页面，可以做首页幻灯，还可以做页面左右滑动切换。Ionic主要放在ion-view中使用??在ionic中，使用ion-slide-box指令声明幻灯片元素，使用ion-slide 指令声明幻灯页元素：ion-slide-box??????ion-slide.../ion-slide??????ion-slide.../ion-slide???...???/ion-slide-box????我们来看一个例子：!DOCTYPE?html??html?ng-app=ionic??head??????meta?name=viewport?content=initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height??????script?src=../lib/js/ionic.bundle.min.js/script??????link?rel=stylesheet?type=text/css?href=../lib/css/ionic.min.css??????style?type=text/css??????????ion-slide?div{??????????????width:100%;??????????????height:600px;??????????????text-align:center;????????????}????????????ion-slide?img{??????????????height:500px;??????????}????????/style??/head??body????????ion-slide-box??????????ion-slide??????????????div?class=box?positive-bgfirst/div??????????/ion-slide??????????ion-slide??????????????div?class=box?energized-bgsecond/div??????????/ion-slide??????????ion-slide??????????????div?class=box?balanced-bgthread/div??????????/ion-slide??????/ion-slide-box??/body??/html????指令ion-slide-box有一些可选的属性可以定制其播放行为：?does-continue - 是否循环切换 你可能注意到，刚才的示例中，开头的幻灯页只能向左滑动，最后的幻灯页只能向右滑动。 将does-continue属性值设为true，就可以让幻灯页组首尾连接起来，循环切换。?auto-play - 是否自动播放 通过将auto-play属性设置为true，可以让幻灯页自动切换。切换的间隔默认是4000ms，可以 通过属性slide-interval进行调整。?slide-interval - 自动播放的间隔时间，默认为4000ms。showr - 是否显示分页器 分页器用来指示幻灯页的选中状态，位于幻灯片的底部。 允许值为：true | false!DOCTYPE?html??html?ng-app=ionic??head??????meta?name=viewport?content=initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height??????script?src=../lib/js/ionic.bundle.min.js/script??????link?rel=stylesheet?type=text/css?href=../lib/css/ionic.min.css??????style?type=text/css??????????ion-slide{??????????????text-align:center;??????????}????????????ion-slide?img{??????????????width:?100%;??????????}????????/style??/head??body??????ion-slide-box