本文分享了Ionic框架开发跨平台应用的实用技巧，包括调整tab位置、使用侧边栏、定义导航栏、解决复制问题等。
逗笑
生活本来就不易！每个人都会无意或者有意地将自己和身边的人对比，不觉忽的羡慕着周围的人，想着他们过得是多么快乐，物质上多么的丰富，就已经让自己时时刻刻都沉入憋屈或者不开心的心境中。
很多时候，我们没有办法像别人说的那样，什么都不去向，何必在乎别人，何必作比较呢？你做好你自己就可以了。说是这样子说，可是毕竟生活在同一个的圈子里的人，现实就是现实，环境，工作压力，甚至是人生各种的不期而至的事，让每一个人都会在生活中产生痛苦，甚至迷失生活的方向。人有时就会感叹不公平，自然感觉别人活得多么好，生活多么舒服。
其实每个人都有每一个人的痛苦，我们有时看到只是每个人的表面，即是生活再怎么不如意，我们生活中也要佯装不将就。
生活本来就不易，生活本来就不将就！
最近由于项目想要，用ionic开发一款跨平台的app，下面是总结的一些问题。
1、tab位置问题，android中显示在顶部，ios显示在底部，如何解决？
在config中设置.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
// 解決在androi环境中tabs 在顶部的问题
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
//设置导标题居中
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
2、如何在在tab中使用侧边栏?
<ion-side-menus >
<ion-side-menu-content ng-controller="ContentController">
//tabs在里面
<tabs></tabs>
</ion-side-menu-content>
<!--侧滑页面-->
<ion-side-menu side="left" width="100">
<ion-content class="dark-bg">
</ion-content>
</ion-side-menu>
</ion-side-menus>
这样子的话，相当于设定了一个公共的侧边栏，在任何的其他页面都可以调用该侧边栏
那么如何体用触发该侧边栏呢？
.controller('ContentController',function($scope, $ionicSideMenuDelegate) {
//
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
});
3、ion-item的一些主题？
在scss文件夹下的_items.scss中可以看到：
// Different themes for items
&.item-light {
@include item-style($item-light-bg, $item-light-border, $item-light-text);
}
&.item-stable {
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
}
&.item-positive {
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
}
&.item-calm {
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
}
&.item-assertive {
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
}
&.item-balanced {
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
}
&.item-energized {
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
}
&.item-royal {
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
}
&.item-dark {
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
}
上面有不同颜色的主题，那么我们在用的时候,只需要选择加入到item的class中即可
<ion-item class="item-remove-animate item-avatar item-icon-right item-light">
如果没有设置主题的话，item在拖曳滚动的时候，会很容易触碰到点击选中的效果，感觉体验不爽。
4、如何在不同的页面重新定义导航头部？
一般我们会在主页面定义一个公共的头部，
<body ng-app="starter">
//公共头部
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
//class="button-clear"将返回按钮的button清除，重新定义图标
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i>返回
</ion-nav-back-button>
</ion-nav-bar>
//内容区
<ion-nav-view></ion-nav-view>
</body>
那么如果通过tab来创建一个页面，
那么这个页面一般是这样子的：
view-title设置的就是导航条的标题
<ion-view view-title="Chats">
//可以通过ion-nav-buttons在头部导航条上设置按钮
<ion-nav-buttons side="left" >
<button class="button button-icon icon ion-navicon" ng-click='toggleLeft()'></button>
</ion-nav-buttons>
//页面内容
<ion-content>
</ion-content>
</ion-view>
现在有一个需求是要全部更改整个导航条，那么该如何实现的？
其实很简单，在ion-view 设置hide-nav-bar='true'，将原导航条隐藏删除
ion-header-bar再重新写html替换原来导航条即可
<ion-view view-title='User' hide-nav-bar='true'>
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-navicon"></button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button button-icon icon ion-navicon"></button>
</div>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-view>
5、关于在ionic的应用内不能够复制内容的问题
http://www.jianshu.com/p/7b1e3854f283?mType=Group
6、一些常识与技巧
list 有延迟，可以在ion-content处使用 overflow-scroll="true"尝试
在<i>上用ng-click上是没效果的
<label>标签内的事件会在整个label内被触发，点哪都触发
快捷修改背景色style="background-color: #212326;"
能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高
直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div
可以用ng-class="{'important': post.important}"配合css 根据列表元素显示不同的效果
获取日期用$filter，var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');
列表中的元素不能写成 id : 4，应写成 id : "4",注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+"";
使用$log进行log输出,为什么用$log而不是console.log呢？可以看看这个
在安卓上的体验比较差，动画有延迟？可以试试ionic集成的crosswalk
controllers和services 的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService
http://www.jianshu.com/p/b567cc657a49
7、相对时间的解决插件方案
https://scotch.io/tutorials/display-time-relatively-in-angular
https://github.com/urish/angular-moment
(1)引入js文件
<!-- load momentJS (required for angular-moment) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
//中文语言版本文件
<script type="text/javascript" src="js/zh-cn.js"></script>
<!-- load angular-moment --><script src="//cdnjs.cloudflare.com/ajax/libs/angular-moment/0.9.0/angular-moment.min.js"></script>
8、如何隐藏底部导航的tabs
(1)在标签ion-tabs中添加：ng-class="{'tabs-item-hide': $root.hideTabs}"，源码如下：
<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
//tabs
</ion-tabs>
tabs-item-hide这个类本身就是存在的，那么我们在一些场景中希望进入子级页面的时候，可以将子级页面的的底部的导航栏隐藏或者移除。
(2)自定义的指令hideTabs
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$on('$ionicView.beforeEnter', function() {
var watch = scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
//完成后销毁watch监听
watch();
});
});
scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = false;
});
}
};
hideTabs是我们需要在子级页面用到的隐藏指令。
(3)你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下：
<ion-view hide-tabs="true" view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
</p>
</ion-content>
</ion-view>
下面说一下视图生命周期及事件集
$ionicView.loaded
视图已经被加载了。这事件只发生一次当视图被创建并添加到Dom中。当跳出页面并且被缓存了的话，再次访问这个页面时这个时间将不会被激活。Loaded事件是个好方式让你为这个视图设置你的代码； 然而，他并不是我们推荐的事件去监听视图被激活。
也就是说从A页面->B页面，B是需要隐藏底部导航的目标页面，也即是相当于$ionicView这个视图对象，经过路由跳转时，完成loaded的DOM元素记载，当然包括解释hideTabs这个自定义指令
$ionicView.beforeEnter B目标视图即将被打开变成活动页面。
$ionicView.enter 进入B目标视图并被激活。这事件被激活来判断这个视图是第一个加载还是被缓存了的。
$ionicView.afterEnter 进入视图并是当前的活动页面
$ionicView.beforeLeave 完成任务后点击跳转准备切换至其他页面，B目标视图将被关闭并且不是活动页面。
$ionicView.leave 离开这个视图并且不是活动页面。调用这个事件判断应该被缓存还是摧毁。
$ionicView.afterLeave 已经离开视图，B又并成为非激活页面
$ionicView.unloaded 视图的Controller已经被摧毁并且他的页面元素也从Dom中移除即是将缓存的B页面的DOM全部删除。
9、关于如何切换tab标签，显示不同页面
https://github.com/JKnorr91/ion-slide-box-tabs
10、ionic中的ion-content与ion-scroll的一些区别用法
ion-content形成上下结构，上面固定，下层可滑动
首先要设置ion-content不可滑动：<ion-content class="has-subheader" scroll="false"></ion-content>
其次在ion-content中，使用ion-scroll，并加上css:<ion-scroll direction="y" style="position: absolute; top:110px; bottom: 0; left: 0; right: 0;"></ion-scroll>
这样就可以实现滑动时ion-content里边的内容形成上下结构，不在ion-scroll标签里边的内容固定不动，ion-scroll里边的内容可以滚动，且不会遮挡上方元素。
ion-scroll水平滑动时在Android中无效
解决办法：在ion－scroll标签里加上overflow-scroll="false"；
11、ionic的css组件详解
http://www.haomou.net/2014/08/09/2014_ionic_api_css/
http://www.haomou.net/2014/10/09/2014_ionic_api_css1/
扫一扫
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
