如果你通过查阅相关文档,ionic的项目框架已经搭好,下面我来总结一下我在项目中所遇到的坑,给还没踩过的人以方便,给自己以勉励:
(1)关于android和ios的适配
因为ionic默认的tabs状态是位于每个页面的二级标题处,并没有位于底部,不过有相关的配置可以设置:
$ionicConfigProvider.scrolling.jsScrolling(true);
$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('bottom');//默认为left
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
$ionicConfigProvider.views.swipeBackEnabled(false);
(2)关于ionic路由配置的cache以及刷新问题
在路由里面配置cache缓存,一定要慎用,有时候你跳转到新页面的时候,数据并没有刷新,此时采用跳转后{reload:true},同时采用cache:false就可以实现数据刷新,但也由此会衍生出其他稀奇古怪的问题,所以建议还是不要用此方法刷新,最好的办法是采用
$scope.$on("$stateChangeSuccess",function(){
//你的数据展现
})
来实现数据刷新
(3)关于返回上一级或者多级的问题
关于返回的思路,
1、用路由状态返回
2、用ionic框架里边自带的标签属性返回
但是我在用的时候,突然发现这里返回是好的,但是在加入数据以后,就会出现返回错乱的问题,并没有返回到我想指定的地方,此时我通过查阅得到可以再配置中添加依赖$ionicHistory,然后采用浏览历史查看的返回方式进行,$ionicHistory.goBack();采用此方法可在$ionicHistory.goBack()中添加参数,例如$ionicHistory.goBack(-2);就返回上上层页面,不过切忌不能写成$ionicHistory.goBack(“-2”);的形式,会报错的
(4)关于$location.path() 的使用
此种用法也可用于跳转到指定页面,但是一般的跳转都是采用路由“tab.myindex”此种写法,但是一旦用了$location.path(),就需要写为
$location.path() == '/tab/myindex'此种形式,否则没有任何效果,同时记得添加依赖$location
(5)关于弹出框的一些问题
本来根据官方文档API,弹出框是没有任何问题的,关键是根据客户需求在弹窗口上面改造,例如
var OpenPhoto="<img style='height:50%; width:100%;' src='"+pageFilepath+"'/>"
var confirmPopup = $ionicPopup.confirm({
title: '解密图片预览',
template: OpenPhoto,
buttons: [
{
text: '取消',
type: 'button-positive button-outline'
},
{ text: '确定',
type: 'button-positive button-outline',
},
]
});
在confirmPopup 方法中的template模板里面,官方文档里面是只有一个标签来呈现这里面的内容,但是现在项目需求要对里面的样式进行改进,我在里面写class类给样式,直接给样式都不可以,没办法,只好在外面定义了一个变量存起来,然后放进去,这样才可以达到预期的效果
好了,今天先总结这几个,还有一些还没有整理好,待这你好之后再给大家分享,望咱中国的开源之路越走越广