Question

我有一个离子应用程序，它有一个详细视图，用于显示某些元素的详细信息。在每个详细信息视图中，我显示next和previous元素的按钮。在导航状态下，状态保持不变，只有视图模型实例会更改，并且将显示新数据。我的state看起来像是：

.state('main.tabs', {
  url: '/element/:id',
  params: {
    previous: null,
    next: null
  },
  cache: false,
  views: {
    'pageContent': {
      templateUrl: 'element/templates/element.tabs.html',
      controller: 'ElementTabCtrl as tabCtrl',
    }
  },
  resolve: {
    activeElement: function (DataService, $stateParams) {
      return DataService.setActiveElement($stateParams.id);
    }
  }
})

触发导航的功能是：

  $scope.tabNav = function (tabSref) {
    $state.go(tabSref, {id:activeElement.id});
  }

现在每当我点击一个按钮调用tabNav()函数时，在将新参数加载到视图中之前，屏幕会冻结几毫秒。

如何执行导航动画或显示在更改activeElement之前一直存在的加载屏幕？

Answer 1

选项1：重新加载视图。您可以使用属性重新加载向$ state.go调用添加第三个“选项”对象，以便始终重新加载当前视图，从而触发导航动画并移除屏幕冻结。

$state.go(tabSref, { id: activeElement.id }, { reload: true });

有关详细信息，请参阅http://angular-ui.github.io/ui-router/site/#/api/ui.router.state。$ state。

reload（v0.2.5） - {boolean = false | string | object}，如果为true，即使没有状态或参数更改，也会强制转换。它将重新加载当前状态和父状态的结果和视图。如果reload是一个字符串（或状态对象），则获取状态对象（通过名称或对象引用）;和\转换重新加载该匹配状态的解析和视图，以及它的所有子状态。

选项2：显示加载屏幕。 Ionic有一个$ ionicLoading服务，您可以利用它在页面转换时覆盖加载屏幕。根据{{1}} wiki https://github.com/angular-ui/ui-router/wiki，转换完成后会广播ui-router个事件，这意味着您可以执行以下操作：

$stateChangeSuccess

$ stateChangeSuccess - 状态转换完成后触发。 $ rootScope。$ on（'$ stateChangeSuccess'，function（event，toState，toParams，fromState，fromParams）{...}）

您可以在此处详细了解$ ionicLoading http://ionicframework.com/docs/api/service/ $ ionicLoading /

保持相同状态的离子导航动画

1 个答案: