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

问题: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 和移动开发者的共同选择。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,043评论 25 709
  • AngularJS简介:AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,...
    程序员米粉阅读 48,657评论 32 117
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,194评论 4 61
  • 【反应第二】(2.2) 人言者,动也;已默者,静也。因其言,听其辞。言有不合者,反而求之,其应必出。言有象,事有比...
    陈力平阅读 3,375评论 0 0
  • 佛借着人身留在世间,人依着佛性活着,刹那是生命的单位,苦乐全在人心定义。佛以众生愚昧的成就世界,内心自在便是成佛。...
    关中人阅读 3,973评论 0 2