提前说明:这些坑是ionic1的。
一、关于缓存:<ion-view>中设置cache-view="false"表示禁用缓存,默认为true;
二、列表进入详情页面后返回,列表页面删选栏和滚动条和跳转前一样,但从home进入列表页面要刷新。思路是用$ionicHistory判断是进入or回退,要是进入就初始化,回退就保留缓存:
- 列表页面设置cache-view="true";
- home控制器中提供添加:$ionicHistory.clearHistory(),因为不管回退还是进入,$ionicHistory的backView都是home页面;
- 列表页面添加以下代码:
$scope.$on("$ionicView.beforeEnter", function() { var clearHistoryForIndexPage = function() { var history = $ionicHistory.forwardView(); if (!history) { init(); } }; clearHistoryForIndexPage(); });
其中init()为初始方法。
三、滚动条:
- <ion-scroll>必须设置高度,且高度小于内容时才会滚动;
- 在浏览器下,滚动条滚动到底部还能再继续滚动,但真机上确是到底部无法滚动,不得不说这真是个坑,我研究了好久,结果在真机上却是正常的,所以有时候找不出原因,不妨真机调试看看,没准只是浏览器视图错误。
- 用指令动态设置<ion-scroll>的高度:
.directive('scrollHeight',function($window){ return{ restrict:'AE', link:function(scope,element,attr){ element[0].style.height=($window.innerHeight)+'px'; //这里设置为屏幕高度 } } });
四、ion-infinite-scroll调用多次问题
解决方法:设置immediate-check="false"。
原因:若列表没有很快加载出来,浏览器以为已经到达底部,所以on-infinite方法会触发多次。immediate-check表示是否页面加载后立刻触发on-infinite方法,false表示只有滚动到页面边缘时才触发。
五、$ionicBackdrop 的retain()方法表示显示背景,使用时要注意防止调用三次,否则release()需要调用三次才能取消背景层。
六、<textarea>和padding对页面切换动画的影响:
<ion-view view-title="Facts" > <ion-content > <div class="padding"> <textarea placeholder="test" autofocus="autofocus" rows="6" ng-model="Input.test" ></textarea> </div> <div> test</div> <p > <a class="button icon ion-home" href="#/tab/home"> Home</a> <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a> </p> </ion-content> </ion-view>
在<ion-content>和<textarea>之间任何元素(包括<ion-content>和<textarea>)样式加上padding,都会导致本页面切换时出现卡顿、过头的问题。
ionic2中已经出现了新元素<ion-textarea>,可能解决了该问题
原因和解决方法还没有找到,此坑待填。
七、调起微信支付失败,返回-1。
微信支付开发文档显示-1报错原因为:签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等。
解决方法:将参数timestamp从字符串改成数字即可。