ionic 踩过的坑-基本布局
目录:
- 标题栏 : 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> </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-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坐标
ionic 踩过的坑-基本布局的更多相关文章
- ionic 踩过的坑
内联模板 : script可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng- ...
- 【转载】Fragment 全解析(1):那些年踩过的坑
http://www.jianshu.com/p/d9143a92ad94 Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使 ...
- 那些移动端web踩过的坑
原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变 ...
- apicloud地图、即时通讯、人脸识别登录、以及平时踩过得坑
apicloud技术浅谈 导语 apicloud 的学习也有一段时间了,这是我个人的一些经验,和踩过的坑,希望对大家能有一些帮助. apicloud的知识准备 apicloud 是一个用原生的思想搭建 ...
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"
欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...
- Redis Cluster踩过的坑
Redis Cluster踩过的坑请参考如下链接:http://www.iteye.com/blogs/subjects/Redis_Cluster_Devops
- 第八篇:web之前端踩的一些坑
前端踩的一些坑 前端踩的一些坑 本节内容 事件代理 清除标签的所有事件 bootstrap的模态框自定义方法 ajax在django里面实现post提交 ajax提交数据嵌套 1.事件代理 之前写 ...
随机推荐
- Shodan新手入坑指南
*本文原创作者:xiaix,本文属FreeBuf原创奖励计划,未经许可禁止转载 亲们~黑五 Shodan Membership 只要5刀,你剁手了没? 什么是 Shodan? 首先,Shodan 是一 ...
- java18
1:Map(掌握) (1)将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值. (2)Map和Collection的区别? A:Map 存储的是键值对形式的元素,键唯一,值可以重 ...
- Python: Win7下使用 pip install lxml 无法安装lxml?
1.在网址 http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 下,搜索lxml,下载Python对应的lxml版本.如下图: 2.打开cmd,进入到lxm ...
- rpm 与 yum 源
rpm rpm -e 删除软件包rpm -i 安装软件包rpm -U 更新软件包rpm -qa ...
- 51nod1088(最长回文子串)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1088 题意: 中文题目诶~ 思路: 这道题字符串长度限定为1 ...
- Laravel Homestead安装笔记
引言: 最近开始学习laravel框架,了解到有个laravel homestead的box,开发起来非常方便快捷,于是就准备开始配置homestead虚拟开发环境了 什么是Homestead 要想学 ...
- Oracle 11g RAC 卸载CRS步骤
Oracle 11g之后提供了卸载grid和database的脚本,可以卸载的比较干净,不需要手动删除crs ##########如果要卸载RAC,需要先使用dbca删除数据库,在执行下面的操作### ...
- [译]SSAS下玩转PowerShell
操作SSAS数据库的方法有很多,是否有一种可以方法可以通过脚本自动去做这些事呢,比如处理分区,创建备份以及监视SSAS的运行状况. 原文地址: http://www.mssqltips.com/sql ...
- 当年只会C# 所以写C++就成这样了!
这应该是4-5年前了. 当年之会c#敲敲代码也不会C++但深信开发这东西只要思想有了. 只是语法问题. 对于C++这貌似只有大牛才能胜任的,而对于我来说是如此困难. 所以想想办法搞了很多通用类来避免C ...
- 转载:Tomcat的JVM设置和连接数设置
Windows环境下修改“%TOMCAT_HOME%\bin\catalina.bat”文件,在文件开头增加如下设置:set JAVA_OPTS=-Xms256m -Xmx512m Linux环境下修 ...