探索Ionic过程中的一些亮点与各种坑整理

来源:互联网 发布:js 字符串 match 编辑:程序博客网 时间:2024/06/04 19:49

说在前面:个人接触ionic不到半个月的时间,必定有理解上的错误,欢迎拍砖。这段时间,完全改变了对H5的看法,在这里mark一下。

Ionic与AngularJs框架绑的很紧,既是优点也是缺点。

实际上Ionic可以分成三大块:

第一块:样式层。ionic通过CSS3强大的样式,模拟了N个平台特有的特征,其中包括操作特征和视图特征。

第二块:逻辑层。直接利用AngularJs的框架概念(MVVM),双向绑定等等...巴拉巴拉一堆爽翻的功能。

第三块:交互层。使用大名鼎鼎的cordova(PhoneGap)框架,通过编写插件的方式与原生打交道。

各种坑解决办法

1. 隐藏当前页下的导航栏:

<ion-view hide-nav-bar="true" />
2. 定制导航栏标题
<ion-view view-title="用户注册"/>
3. 自定义导航栏显示内容
<ion-view>    <ion-nav-buttons side="left">          <button class="button" ng-click="doSomething()">            I'm a button on the left of the navbar!          </button>    </ion-nav-buttons></ion-view>
4. 跳转页面
$state.go('login');
5. 不忽略Header高度(如果你自定义了Header,有可能出现Header将内容覆盖的情况)
<div class="has-header"/>
6. 返回上一个页面(当在tab页下跳转到一个新的页面,导航栏不会出现默认的返回按钮,所以你需要自己写一个back按钮)
$ionicHistory.goBack();

7. 多个页面共享数据

可以在$rootScop下保存数据,不过最好的方式是使用工厂/服务,因为Services天生就是用来解决数据访问的


0 0