初始前端接触angular.js+ionic框架,我这样做好吗?

字数 820阅读 256

问题:angular.js+ionic框架,要适应不同手机头部与内容的高度 

之前没有接触过angular.js,认为这个框架Vue一样,上手还比较简单,后来,在实际的工作当中,我才明白自己想的太简单了。

第一次在iphone上开发的App的时候,将content离ion-header-bar高度调至10px,从UI上刚好达到了设计师的要求,等切换到了安卓手机观看,才发现之前的10px高度居然变成了30px高度,然后我又在Html中将高度增加20px,结果到了iPhone手机,content与header居然有交叉,高度给的太少了。

我是新手一枚,第一次参加项目开发,遇到这个问题,来回折腾了有些呛。打算写js来判断它是iOS系统还是android系统,但是又不知道从何处下手。后来,在同事的帮助下,我才知道,原来ionic框架早就把这个问题想好了,不用我自己去写代码判断。

它本身就有一个$ ionPlatform方法,在控制器中可以判断。

于是,我就在controllers.js 里进行判断:

  if (ionic.Platform.isIOS()) {  $scope.position_headbar_top='106';  $scope.content_top='108px';        }    else{ $scope.content_top='88px'; $scope.position_headbar_top='86';          }


然后在HTML里面 的 ion-content 写上content_top。来回切换多次,发现高度可以自适应iOS和android,这个问题解决了,心里很是高兴,同时也有些不安。

因为ionic框架我也没有接触过,没有想到着框架这么方便,让我忍不住想要进一步去了解它。于是,我上网查了查Ionic,官网文档【http://www.ionic.wang/js_doc-index-id-21.html】上这样介绍:

Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用。Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

然后从头开始了解这个框架,于是,我就开始写这些笔记,来记下自己在工作以及学习中遇到的问题,分享出来,让自己学以致用。

推荐阅读更多精彩内容