【Ionic】---AngularJS扩展基本布局
目录:
- 标题栏 : ion-header-bar
- 页脚栏 : ion-footer-bar
- header/footer : 样式及内容
- 内容区 : ion-content
- 滚动框 : ion-scroll
- 拉动刷新 : ion-refresher
- 滚动刷新 : ion-infinite-scroll
- 脚本接口 : $ionicScrollDelegate
标题栏 : ion-header-bar
ion-header-bar指令声明一个标题栏元素,标题栏总是位于屏幕的顶部:
- <ion-header-bar>...</ion-header-bar>
ion-header-bar指令有两个可选的属性:
- align-title - 设置标题文字的对齐方式。允许值:left | right | center,分别对应左对齐、 右对齐和居中对齐。
- no-tap-scroll - 当点击标题时,是否将内容区域自动滚动到最开始。允许值:true | false,默认为true。
页脚栏 : ion-footer-bar
ion-footer-bar指令声明一个页脚栏元素,页脚栏总是位于屏幕的底部:
- <ion-footer-bar>...</ion-footer-bar>
ion-footer-bar指令有一个可选的属性:
- align-title - 设置标题文本的对齐方式。允许值:left | right | center 。
header/footer : 样式及内容
ion-header-bar和ion-footer-bar经过编译后其样式类将分别被设置为.bar.bar-header 和.bar.bar-footer,回忆下我们在CSS框架课程中已经了解到的内容:
显然,你可以使用这些样式调整ion-header-bar/ion-footer-bar的外观!
内容区 : ion-content
使用ion-content指令定义内容区域:
- <ion-content>...</ion-content>
ion-content占据header和footer以外的剩余区域。当内容超过可视区域时,ion-content 可以滚动以显示被隐藏的部分。
试着滚动右边示例效果的内容区域,你会发现浮现的滚动条。当滚动停止时,浮动条消失。 这是ionic定制的滚动视图,可以使用overflow-scroll属性设置使用系统内置的滚动条:
- <ion-content overflow-scroll="true">...</ion-content>
滚动框 : ion-scroll
ion-scroll指令声明一个可滚动的容器元素,用户可以按住内容进行拖动:
- <ion-scroll>
- <!--content-->
- </ion-scroll>
ion-scroll指令有两个常用的可选属性:
- direction - 内容可以滚动的方向。允许值:x|y|xy。默认为 y。
- zooming - 是否支持pinch-to-zoom(捏拉缩放)。允许值:true | false。
在使用ion-scroll时,需要显式指定滚动框元素及内容元素 的大小(高度和宽度):
拉动刷新 : ion-refresher
使用指令ion-refresher可以为滚动容器(ion-scroll或ion-content)增加 拉动刷新/pull-to-refresh的功能:
- <ion-refresher></ion-refresher>
ion-refresher指令有以下可选的属性:
- on-refresh - 当用户向下拉动足够的距离并松开时,执行此表达式
- on-pulling - 当用户开始向下拉动时,执行此表达式
- pulling-text - 当用户向下拉动时,显示此文本
- pulling-icon - 当用户向下拉动时,显示此图标
- refreshing-icon - 当用户向下拉动并松开后,显示的等待图标。ionic推荐使用spinner 代替这个属性
- spinner - 和refreshing-icon的作用一样,但spinner是基于SVG的动画
- disable-pulling-rotation - 禁止下拉图标旋转动画
注意在刷新完毕后,应当使用作用域的$broadcast()方法通知框架:
- $scope.$broadcast("scoll.refreshComplete")
例:
<ion-refresher on-refresh="doRefresh()" pulling-text="松开即可刷新..." refreshing-text="正在更新..." refreshing-icon="ion-loading-c">
</ion-refresher>
滚动刷新 : ion-infinite-scroll
使用ion-infinite-scroll指令可以为滚动容器(ion-scroll或ion-content)增加 滚动刷新功能:
- <ion-infinite-scroll on-infinite="">...</ion-infinite-scroll>
ion-infinite-scroll指令有如下属性:
- on-infinite - 必须。当滚动到底部时执行此表达式
- distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%
- icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性
- spinner - 可选。载入时的spinner。默认是ionSpinner
- immediate-check - 可选。是否在载入时立即检查滚动框范围
脚本接口 : $ionicScrollDelegate
可以使用服务$ionicScrollDelegate,通过脚本控制滚动容器(ion-scroll或ion-content)。 $ionicScrollDelegate服务提供的常用方法如下:
- resize()
重新计算容器尺寸。当父元素大小变化时,应当调用此方法
- scrollTop([shouldAnimate])
滚动到内容顶部。shouldAnimate参数为true|false,表示是否使用动画展示滚动过程
- scrollBottom([shouldAnimate])
滚动到内容底部。shouldAnimate参数为true|false,表示是否使用动画展示滚动过程
- scrollTo(left,top[,shouldAnimate])
滚动到指定位置。left和top分别表示要滚动到的x坐标和y坐标
- scrollBy(left,top[,shouldAnimate])
滚动指定偏移量。left和top分别表示要滚动的x偏移量和y偏移量
- getScrollPosition()
读取当前视图位置。返回值为一个JSON对象,具有left和top属性,分别表示x和y坐标
本文参考:http://www.w2bc.com/Article/33160
【Ionic】---AngularJS扩展基本布局的更多相关文章
- ionic入门之AngularJS扩展基本布局
目录: 标题栏 : ion-header-bar 页脚栏 : ion-footer-bar header/footer : 样式及内容 内容区 : ion-content 滚动框 : ion-scro ...
- ionic入门之基本布局
目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.c ...
- 【Ionic+AngularJS 开发】之『个人日常管理』App(一)
写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性 ...
- Cordova Ionic AngularJS
实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html
- 6个强大的AngularJS扩展应用
本文链接:http://www.codeceo.com/article/6-angularjs-extension.html本文作者:码农网 – 小峰 AngularJS现在非常热门,是Google推 ...
- Ionic/Angularjs 知识点解析
Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...
- ionic入门之AngularJS扩展(一)
ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML. CSS和JavaScript,开发跨平台(目前支持:Android.iOS,计划支持:Wind ...
- ionic之AngularJS扩展 移动开发(视图导航一)
目录: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-ba ...
- ionic之AngularJS扩展动态组件
目录: 1. 模态对话框 : $ionicModal 2. 上拉菜单 : $ionicActionSheet 3. 弹出框 : $ionicPopup 4. 浮动框 : $ionicPopover 5 ...
随机推荐
- Elasticsearch和mysql数据同步(elasticsearch-jdbc)
1.介绍 对mysql.oracle等数据库数据进行同步到ES有三种做法:一个是通过elasticsearch提供的API进行增删改查,一个就是通过中间件进行数据全量.增量的数据同步,另一个是通过收集 ...
- c# 实现IComparable、IComparer接口、Comparer类的详解
在默认情况下,对象的Equals(object o)方法(基类Object提供),是比较两个对象变量是否引用同一对象.我们要必须我自己的对象,必须自己定义对象比较方式.IComparable和ICom ...
- MFC拆分窗口及它们之间的数据交换(转)
转自:http://blog.csdn.net/nuptboyzhb/article/details/7455471 源代码:http://download.csdn.net/detail/nuptb ...
- vsftpd 权限设置
vsftpd 虚拟用户 多用户不同权限 2010-06-27 00:54:20| 分类: linux大杂绘|举报|字号 订阅 1.需要建立一个用户,这个用户是linux系统的本地用户,各ft ...
- win7硬盘安装Ubuntu12.04 64位时显示Error 15: File not found.
安装Ubuntu12.04 -64位时,用EasyBCD建好引导文件重启电脑后出现如下错误: Error 15: File not found 原因一个是安装文件所在盘符不对,另一个是文件名.Ubun ...
- Windows命令大全
From:http://technet.microsoft.com/zh-cn/library/cc731728(v=ws.10).aspx Adprep Append Arp Assoc At At ...
- hibernate+mysql 8小时问题
在生产环境中使用了 自带的连接池 结果 遇到 mysql8小时问题 然后 采用了 c3p0 连接池 hibernate 版本 4.3.6 c3p0版本 0.9.5-pre10 ps:hibernate ...
- Android中Activity启动模式详解
在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启动模式决定了Activity的启动运行方式. An ...
- Android数据的四种存储方式之SQLite数据库
Test.java: /** * 本例解决的问题: * 核心问题:通过SQLiteOpenHelper类创建数据库对象 * 通过数据库对象对数据库的数据的操作 * 1.sql语句方式操作SQLite数 ...
- c语言指针函数与函数指针
例一:指针函数 指针函数是指带指针的函数,即本质是一个函数.函数返回类型是某一类型的指针 类型标识符 *函数名(参数表) int *f(x,y); 首先它是一个函数,只不过这个函数的返回值是一个 ...