Ionic基础——幻灯指令 ion-slide-box
2016-02-19 18:15
399 查看
一.幻灯片 : ion-slide-box指令介绍
ion-slide-box可以做什么
1. 可以做启动切换页面
2. 可以做首页幻灯
3. 可以做页面左右滑动切换
Ionic放在哪个指令使用
主要放在ion-view中使用
幻灯片也是一种常见的UI表现方式,它从一组元素中选择一个投射到屏幕可视区域,用户 可以通过滑动方式(向左或向右)进行切换。
在ionic中,使用ion-slide-box指令声明幻灯片元素,使用ion-slide 指令声明幻灯页元素:
指令ion-slide-box有一些可选的属性可以定制其播放行为:
does-continue - 是否循环切换 你可能注意到,刚才的示例中,开头的幻灯页只能向左滑动,最后的幻灯页只能向右滑动。 将does-continue属性值设为true,就可以让幻灯页组首尾连接起来,循环切换。
auto-play - 是否自动播放 通过将auto-play属性设置为true,可以让幻灯页自动切换。切换的间隔默认是4000ms,可以 通过属性slide-interval进行调整。
slide-interval - 自动播放的间隔时间,默认为4000ms。
show-pager - 是否显示分页器 分页器用来指示幻灯页的选中状态,位于幻灯片的底部。 允许值为:true | false
三. ion-slide-box : 事件及变量
指令ion-slide-box提供了可选的用于事件监听的属性:
pager-click - 分页器点击事件 pager-click属性应当设置为一个当前作用域上的函数调用表达式,这个函数将被 传入被点击的分页按钮对应的幻灯页序号:index
on-slide-changed - 幻灯页切换事件 on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式,这个函数 将被传入当前幻灯页的序号:$index active-slide - 当前幻灯页索引
active-slide属性应当设置为一个当前作用域上的变量,当幻灯片切换时,这个变 量同步的反应当前的幻灯页索引号
四.脚本接口: $ionicSlideBoxDelegate
可以使用服务$ionicSlideBoxDelegate在脚本中操作幻灯片对象:
update() - 重绘幻灯片 有时,比如当容器尺寸发生变化时,需要调用update()方法重绘幻灯片。
slide(to[,speed]) - 切换到指定幻灯页 参数to表示切换的目标幻灯页序号,参数speed是可选的,表示以毫秒 为单位的切换时间
enableSlide([shouldEnable]) - 幻灯片使能 参数shouldEnable的允许值为:true | false 。
previous() - 切换到前一张幻灯页
next() - 切换到后一张幻灯页
currentIndex() - 获得当前幻灯页的序号
slideCount() - 获得全部幻灯页的数量
一个完整示例:
ion-slide-box可以做什么
1. 可以做启动切换页面
2. 可以做首页幻灯
3. 可以做页面左右滑动切换
Ionic放在哪个指令使用
主要放在ion-view中使用
幻灯片也是一种常见的UI表现方式,它从一组元素中选择一个投射到屏幕可视区域,用户 可以通过滑动方式(向左或向右)进行切换。
在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-bg">first</div> </ion-slide> <ion-slide> <div class="box energized-bg">second</div> </ion-slide> <ion-slide> <div class="box balanced-bg">thread</div> </ion-slide> </ion-slide-box> </body> </html>二.ion-slide-box : 属性设置定制播放行为
指令ion-slide-box有一些可选的属性可以定制其播放行为:
does-continue - 是否循环切换 你可能注意到,刚才的示例中,开头的幻灯页只能向左滑动,最后的幻灯页只能向右滑动。 将does-continue属性值设为true,就可以让幻灯页组首尾连接起来,循环切换。
auto-play - 是否自动播放 通过将auto-play属性设置为true,可以让幻灯页自动切换。切换的间隔默认是4000ms,可以 通过属性slide-interval进行调整。
slide-interval - 自动播放的间隔时间,默认为4000ms。
show-pager - 是否显示分页器 分页器用来指示幻灯页的选中状态,位于幻灯片的底部。 允许值为: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 does-continue="true" auto-play="true" slide-interval="1000" show-pager="true" > <ion-slide> <img src="img/01.png"> </ion-slide> <ion-slide> <img src="img/02.png"> </ion-slide> <ion-slide> <img src="img/03.png"> </ion-slide> <ion-slide> <img src="img/04.png"> </ion-slide> </ion-slide-box> </body> </html>
三. ion-slide-box : 事件及变量
指令ion-slide-box提供了可选的用于事件监听的属性:
pager-click - 分页器点击事件 pager-click属性应当设置为一个当前作用域上的函数调用表达式,这个函数将被 传入被点击的分页按钮对应的幻灯页序号:index
on-slide-changed - 幻灯页切换事件 on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式,这个函数 将被传入当前幻灯页的序号:$index active-slide - 当前幻灯页索引
active-slide属性应当设置为一个当前作用域上的变量,当幻灯片切换时,这个变 量同步的反应当前的幻灯页索引号
四.脚本接口: $ionicSlideBoxDelegate
可以使用服务$ionicSlideBoxDelegate在脚本中操作幻灯片对象:
update() - 重绘幻灯片 有时,比如当容器尺寸发生变化时,需要调用update()方法重绘幻灯片。
slide(to[,speed]) - 切换到指定幻灯页 参数to表示切换的目标幻灯页序号,参数speed是可选的,表示以毫秒 为单位的切换时间
enableSlide([shouldEnable]) - 幻灯片使能 参数shouldEnable的允许值为:true | false 。
previous() - 切换到前一张幻灯页
next() - 切换到后一张幻灯页
currentIndex() - 获得当前幻灯页的序号
slideCount() - 获得全部幻灯页的数量
<!DOCTYPE html> <html ng-app="myApp"> <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{ height:600px; text-align:center; } ion-slide img{ height:500px; } </style> </head> <body ng-controller="myCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">active : {{index}}</h1> </ion-header-bar> <ion-slide-box does-continue="true" show-pager="true" auto-play="true" on-slide-changed="go_changed(index)" active-slide="index" pager-click="go(index)"> <ion-slide> <img src="img/01.png"> </ion-slide> <ion-slide> <img src="img/02.png"> </ion-slide> <ion-slide> <img src="img/03.png"> </ion-slide> <ion-slide> <img src="img/04.png"> </ion-slide> </ion-slide-box> </body> </html> <script type="text/javascript"> angular.module("myApp",["ionic"]) .controller("myCtrl",function($scope,$ionicSlideBoxDelegate){ $scope.index = 0; $scope.go = function(index){ $ionicSlideBoxDelegate.slide(index); } $scope.go_changed=function(index){ console.log(index) } }); </script>
一个完整示例:
<!DOCTYPE html> <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic App</title> <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script> <script src="script.js"></script> </head> <body animation="slide-left-right-ios7"> <ion-nav-bar class="nav-title-slide-ios7 bar-light"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="intro.html" type="text/ng-template"> <ion-view> <ion-nav-buttons side="left"> <button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-if="!slideIndex"> Skip Intro </button> <button class="button button-positive button-clear no-animation" ng-click="previous()" ng-if="slideIndex > 0"> Previous Slide </button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button button-positive button-clear no-animation" ng-click="next()" ng-if="slideIndex != 2"> Next </button> <button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-if="slideIndex == 2"> Start using MyApp </button> </ion-nav-buttons> <ion-slide-box on-slide-changed="slideChanged(index)"> <ion-slide> <h3>Thank you for choosing the Awesome App!</h3> <div id="logo"> <img src="http://code.ionicframework.com/assets/img/app_icon.png"> </div> <p> We've worked super hard to make you happy. </p> <p> But if you are angry, too bad. </p> </ion-slide> <ion-slide> <h3>Using Awesome</h3> <div id="list"> <h5>Just three steps:</h5> <ol> <li>Be awesome</li> <li>Stay awesome</li> <li>There is no step 3</li> </ol> </div> </ion-slide> <ion-slide> <h3>Any questions?</h3> <p> Too bad! </p> </ion-slide> <ion-slide> <h3>Any questions?</h3> <p> 这是第四个 </p> </ion-slide> </ion-slide-box> </ion-view> </script> <script id="main.html" type="text/ng-template"> <ion-view hide-back-button="true" title="Awesome"> <ion-content padding="true"> <h1>Main app here</h1> <button class="button" ng-click="toIntro()">Do Tutorial Again</button> </ion-content> </ion-view> </script> </body> </html>
body { cursor: url('http://ionicframework.com/img/finger.png'), auto; } .slider { height: 100%; } .slider-slide { padding-top: 80px; background-color: #fff; color: #000; text-align: center; font-weight: 300; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } #logo { margin: 30px 0px; } #list { margin: 30px auto; width: 170px; font-size: 20px; } #list ol { margin-top: 30px; } #list ol li { margin: 10px 0px; list-style: decimal; text-align: left; }
angular.module('ionicApp', ['ionic']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('intro', { url: '/', templateUrl: 'intro.html', controller: 'IntroCtrl' }) .state('main', { url: '/main', templateUrl: 'main.html', controller: 'MainCtrl' }); $urlRouterProvider.otherwise("/"); }) .controller('IntroCtrl', function ($scope, $state, $ionicSlideBoxDelegate) { // Called to navigate to the main app $scope.startApp = function () { $state.go('main'); }; $scope.next = function () { $ionicSlideBoxDelegate.next(); }; $scope.previous = function () { $ionicSlideBoxDelegate.previous(); }; // Called each time the slide changes $scope.slideChanged = function (index) { $scope.slideIndex = index; }; }) .controller('MainCtrl', function ($scope, $state) { console.log('MainCtrl'); $scope.toIntro = function () { $state.go('intro'); }; });
相关文章推荐
- 关于思考和实践
- leetcode笔记--Odd Even Linked List
- Android面试题整理
- 绘制曲线
- 微信粉丝主动推送信息或者商品
- 正则相关
- Python处理日期坐标轴
- 点击AlertDialog按钮不关闭对话框
- 同步函数与异步函数
- 微信api 第三方平台授权 登录 ,获取用户信息
- RazorEngine在非MVC下的使用,以及使用自定义模板
- iOS启动图片适配问题
- mac的svn之cornerstone简易教程
- quick-mark: How Latency is Measured
- Android原生定位
- jquery对象和DOM对象的相互转换
- 项目管理工具~SVN
- c语言:把只含因子2、3和5的数称为丑数,求按从小到大的顺序的第1500个丑数(两种方法比较)
- win7 linux 搭建redis单机环境 详细
- 00 EPLAN安装问题