ionic开发中的各种坑

提前说明：这些坑是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从字符串改成数字即可。

秒客网

ionic开发中的各种坑

相关文章