Question

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

标签是自定义的，并在子标题中实现为按钮栏。

$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>

单击选项卡可更改状态并加载新视图。

这是我对这些标签的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更改转换的方向，但它没有帮助。

作为一种解决方法，我在导航视图（来自there）之间的过渡期间禁用了动画，但这并不是我寻找的方式。

我的离子配置：

Cordova CLI：5.3.3
离子版：1.1.0
Ionic CLI版本：1.7.1

顺便说一下，这个问题在iOS设备（iPhone 6）和模拟器上都会重现，而且也会在Chrome设备模式下重现。

提前致谢。

Answer 1

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

但我使用以下解决方法来避免/阻止它，从而提高了UX的可见性能。

在每个标签上，我添加了以下代码：

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

在我添加到ionContent指令的每个视图中：

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

它解决了这个问题。

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

希望它有所帮助。

Answer 2

<ion-view cache-view="false">

来源：http://ionicframework.com/docs/api/directive/ionNavView/

在iOS（离子框架）上的视图之间转换期间闪烁

2 个答案: