问题：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 和移动开发者的共同选择。
然后从头开始了解这个框架，于是，我就开始写这些笔记，来记下自己在工作以及学习中遇到的问题，分享出来，让自己学以致用。
网友评论