簡體   English   中英

在iOS(離子框架)上的視圖之間過渡期間閃爍

[英]Flickering during the transition between views on iOS (ionic framework)

這是問題的視頻: 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>

單擊選項卡上的將更改狀態並加載新視圖。

這是這些選項卡的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更改過渡的方向 ,但這無濟於事。

作為一種解決方法,我在導航視圖之間(從那里開始 )之間的過渡期間禁用了動畫,但這不是我想要的方式。

我的離子配置:

  • 科爾多瓦CLI:5.3.3
  • 離子版本:1.1.0
  • Ionic CLI版本:1.7.1

順便說一句,此問題在iOS設備(iPhone 6)和模擬器上以及在Chrome設備模式下均同樣出現。

提前致謝。

我沒有解決問題的原因,因為我沒有弄清楚是什么原因。

但是我使用以下變通辦法來避免/防止這種情況,這提高了用戶體驗方面的可見性能。

在每個選項卡上,我添加了以下代碼:

$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

希望能幫助到你。

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

來源: http : //ionicframework.com/docs/api/directive/ionNavView/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM