离子视图转换闪烁问题 [英] Ionic view transition flickering issue

问题描述

我调用API并在 $ ionicView.beforeEnter 中返回绑定响应。但是，当输入视图时，有时我会加载视图但数据在几秒钟之后才会被绑定，尤其是在网络连接不良时。这个问题怎么解决？

I call API and return the response for binding in $ionicView.beforeEnter. However, when the view is entered, sometimes I got the view loaded but the data is not being bind until few seconds later, especially in a bad network connectivity. How could this issue be solved?

这会因为我的API调用是异步的吗？

Would this because of my API call is asynchronous?

angular.module('app').controller(function($scope, ApiMethod) {
    $scope.$on("$ionicView.beforeEnter", function(event, data){
       ApiMethod.GetFormInfo().$promise.then(function (res) {
            $scope.res = res;
       }, function (errRes) {

       })
    });
});

<ion-content>
    <form name="form">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="First Name" ng-model="res.firstName">
          </label>
          <label class="item item-input">
            <input type="text" placeholder="Last Name" ng-model="res.lastName">
          </label>
          <label class="item item-input">
            <textarea placeholder="Comments"  ng-model="res.comments"></textarea>
          </label>
        </div>

        <button type="submit">Submit</button>
    </form>
</ion-content>

推荐答案

是的，由于暂停异步，有一个闪烁 ApiMethod 致电。为了在我的Ionic应用程序中优雅地处理这个，我使用 $ ionicLoading 。这将冻结用户移动，直到数据被加载。我认为最好通知他们加载然后让他们提出一个空白视图。

Yes, there is a flicker because of the pause asynchronous ApiMethod call. To gracefully handle this inside my Ionic application I use $ionicLoading. This will "freeze" the user from moving around until the data has been loaded. I believe it is better to notify them of the loading then make them question a blank view.

已实施：

angular.module('app').controller(function($scope, ApiMethod, $ionicLoading) {

    $scope.show = function() {
        $ionicLoading.show({
            template: 'Loading...'
        }).then(function(){
            console.log("The loading indicator is now displayed");
        });
    };
    $scope.hide = function(){
        $ionicLoading.hide().then(function(){
            console.log("The loading indicator is now hidden");
        });
    };

    $scope.$on("$ionicView.beforeEnter", function(event, data){
        // Show loading
        $scope.show();
        ApiMethod.GetFormInfo().$promise.then(function (res) {
            $scope.res = res;
            // Hide loading
            $scope.hide();
       }, function (errRes) {

       })
    });
});

参考： $ ionicLoading

这篇关于离子视图转换闪烁问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！