ios - 在 iOS 上的 View 之间转换期间闪烁( ionic 框架)

Question

这是问题的视频:https://youtu.be/9m1MlaiuZB0

在视频中，您可以看到在选项卡之间的转换过程中出现了奇怪的闪烁。仅当过渡动画从右到左时才会出现此问题。

选项卡是自定义的，并作为子标题中的按钮栏实现。

$scope.data.tabs = [
  {
    title: "Accepted",
    state: "events.accepted"
  },
  {
    title: "Pending",        
    state: "events.pending"
  },
  {
    title: "Declined",    
    state: "events.declined"
  }
];


<ion-view>   
  .....

  <ion-header-bar align-title="center" class="bar bar-subheader event-type-bar">
    <div class="button-bar">
      <a class="button button-light event-type-bar-button" ng-repeat="tab in data.tabs" tab-state ui-sref="{{tab.state}}">
        {{tab.title}}
      </a>
    </div>
  </ion-header-bar>

  <ion-nav-view name="events-view"></ion-nav-view>

  .....
</ion-view>

单击选项卡会更改状态并加载新 View 。

这是我对这些选项卡的 UI 路由器配置:

  .state('events', {
    url: '/events',
    abstract: true,
    templateUrl: 'views/events/events.html',
    controller: 'EventsCtrl'
  })
  .state('events.accepted', {
    url: '/accepted',
    views:{
        'events-view':{
        templateUrl: 'views/events/accepted.html',
        controller: 'AcceptedEventsCtrl',
        }
    }
  })
  .state('events.pending', {
    url: '/pending',
    views: {
        'events-view': {
        templateUrl: 'views/events/pending.html',
        controller: 'PendingEventsCtrl',
      }
    }
  })
  .state('events.declined', {
    url: '/declined',
    views: {
        'events-view': {
        templateUrl: 'views/events/declined.html',
        controller: 'DeclinedEventsCtrl',
        }
    }   
  })

我试图用 nav-direction 改变过渡的方向, 但它没有帮助。

作为解决方法，我在导航 View 之间的转换期间禁用了动画(来自 there )，但这不是我正在寻找的方式。

我的 ionic 配置:

• Cordova CLI:5.3.3
• ionic 版本:1.1.0
• Ionic CLI 版本:1.7.1

顺便说一下，这个问题在 iOS 设备 (iPhone 6) 和模拟器上重现，也在 Chrome 设备模式下重现。

提前致谢。

Answer 1

我没有解决问题的原因，因为我没有弄清楚它是什么。

但我使用了以下解决方法来避免/防止它，这提高了用户体验方面的可见性能。

在每个选项卡上我添加了以下代码:

$scope.$on("$ionicView.enter", function () { 
  $scope.viewEntered = true; 
});
$scope.$on("$ionicView.beforeLeave", function () { 
  $scope.viewEntered = false; 
});

在每个 View 中，我都添加到 ionContent 指令中:

<ion-content ng-show="viewEntered">
   ....
</ion-content>

它解决了这个问题。

您可以看到结果并与之前的视频进行比较:http://youtu.be/vDXvmZ6wqZE?hd=1

希望对您有所帮助。