[英]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更改過渡的方向 ,但這無濟於事。
作為一種解決方法,我在導航視圖之間(從那里開始 )之間的過渡期間禁用了動畫,但這不是我想要的方式。
我的離子配置:
順便說一句,此問題在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.