【Ionic】---AngularJS扩展基本布局

目录:

  1. 标题栏 : ion-header-bar
  2. 页脚栏 : ion-footer-bar
  3. header/footer : 样式及内容
  4. 内容区 : ion-content
  5. 滚动框 : ion-scroll
  6. 拉动刷新 : ion-refresher
  7. 滚动刷新 : ion-infinite-scroll
  8. 脚本接口 : $ionicScrollDelegate

标题栏 : ion-header-bar

ion-header-bar指令声明一个标题栏元素,标题栏总是位于屏幕的顶部:

  1. <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指令声明一个页脚栏元素,页脚栏总是位于屏幕的底部:

  1. <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指令定义内容区域:

  1. <ion-content>...</ion-content>

ion-content占据header和footer以外的剩余区域。当内容超过可视区域时,ion-content 可以滚动以显示被隐藏的部分。

试着滚动右边示例效果的内容区域,你会发现浮现的滚动条。当滚动停止时,浮动条消失。 这是ionic定制的滚动视图,可以使用overflow-scroll属性设置使用系统内置的滚动条:

  1. <ion-content overflow-scroll="true">...</ion-content>

滚动框 : ion-scroll

ion-scroll指令声明一个可滚动的容器元素,用户可以按住内容进行拖动:

  1. <ion-scroll>
  2. <!--content-->
  3. </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的功能:

  1. <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()方法通知框架:

  1. $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)增加 滚动刷新功能:

  1. <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

时间: 2024-10-13 23:27:10

【Ionic】---AngularJS扩展基本布局的相关文章

【Ionic+AngularJS 开发】之『个人日常管理』App(一)

写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性总结,记录一个自制的"小而萌"Hybrid App开发历程,共勉! [扩展阅读] 企业移动应用开发 混合开发成香饽饽 2016年JavaScript领域中最受欢迎的"明星"们 Hybrid APP混合开发的一些经验和总结 App预览 (*模糊化的个人数据) 简介 个人日常管

6个强大的AngularJS扩展应用

本文链接:http://www.codeceo.com/article/6-angularjs-extension.html 本文作者:码农网 – 小峰 AngularJS现在非常热门,是Google推出的一款非常优秀的前端JS框架.AngularJS最核心的概念是MVC.模块化.自动化双向数据绑 定.语义化标签.依赖注入等.目前AngularJS扩展还比较少,本文就向各位分享6个实用强大的AngularJS扩展应用. 1.AngularJS 认证模块 Satellizer Satellizer

ionic入门之AngularJS扩展(一)

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML. CSS和JavaScript,开发跨平台(目前支持:Android.iOS,计划支持:Windows Phone.Firefox OS) 的原生App应用: ionic主要包括三个部分: CSS框架 - 提供原生App质感的CSS样式模拟.ionic这部分的实现使用了ionicons图标样式库. JavaScript框架 - ionic基于AngularJS基础框架开发,遵循AngularJ

ionic入门之AngularJS扩展

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML. CSS和JavaScript,开发跨平台(目前支持:Android.iOS,计划支持:Windows Phone.Firefox OS) 的原生App应用: ionic主要包括三个部分: CSS框架 - 提供原生App质感的CSS样式模拟.ionic这部分的实现使用了ionicons图标样式库. JavaScript框架 - ionic基于AngularJS基础框架开发,遵循AngularJ

ionic之AngularJS扩展 移动开发(视图导航一)

目录: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-back-button 内联模板 : script 可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng-template,则被称为内联模板.例如: <script type="

WebApp开发框架Ionic+AngularJS+Cordova

目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”.该框架提供了很多基本的移动用户界面范例,例如像列表(lists).标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目.它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单. Ionic宣称他们极度强调

【Ionic+AngularJS 开发】之『个人日常管理』App(二)

准备工作 资源 预装工具 安装bower 1 npm install -g bower 安装ngCordova 1 bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的) 下载好后,在项目的index.hmtl进行引用: 1 <script src="lib/ngCordova/dist/ng-cordova.js"

Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index-tab页面 406 not accessable http请求头问题 1 $httpProvider.interceptors.push(function() { 2 return { 3 "request": function(config) { 4 //console.log(conf

ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】

[功能介绍] 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像.本文介绍的是基于ionic框架,在移动端上传图片的功能. [功能流程] (1)点击页面上的头像,弹出一个对话框,选择[拍照]或者[从相册选择]: (2)选取/拍摄照片: (3)上传照片: [html核心代码] <div ng-controller="myCtrl"> <a ng-click="choosePicMenu()"> <img ng-src=