iOS (离子框架)视图转换过程中的闪烁
iOS (离子框架)视图转换过程中的闪烁
提问于 2016-01-20 16:35:12
这是本期的视频：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方向改变转换的方向，但是没有帮助。
作为一个解决办法，我禁用了在nav视图之间的转换(从那里)动画，但这不是我想要的方式。
我的离子构型：
- Cordova CLI: 5.3.3
- 离子版本: 1.1.0
- 离子CLI版本: 1.7.1
顺便说一句，这个问题在iOS设备(iPhone 6)和模拟器上都是复制的，也是在Chrome设备模式下复制的。
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-16 08:53:03
我没有解决问题的原因，因为我不知道是什么原因。
但是我使用了下面的解决方法来避免/防止它，因为它提高了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
希望能帮上忙。
Stack Overflow用户
发布于 2016-01-20 20:04:05
<ion-view cache-view="false">来源：http://ionicframework.com/docs/api/directive/ionNavView/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34905491
复制相关文章
相似问题
腾讯云开发者
