Question

我正在为Ios开发一个跨平台的应用程序，使用Cordova和Angular Material。

我的主页有三个选项卡，每个选项卡中的内容都将从Web服务加载。

我的问题是当应用程序是在Ios中构建时，每次在标签之间切换时，转换都不顺畅。它有加载数据的延迟时间。

有没有办法在每个标签页中异步加载数据，以便切换过渡将立即执行，内容数据将在以后更新。

Answer 1

以下是从我的评论中扩展的示例 - CodePen

它演示了将特定数据从所有数据传递到特定选项卡内容的功能。还有许多其他方法可以达到相同的效果。

标记

<div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp" ng-controller="MyController as vm">
  <md-content>
    <md-tabs md-dynamic-height="" md-border-bottom="" md-selected="vm.selectedIndex">
      <md-tab label="one">
        <md-content class="md-padding">
          <content data="vm.allData[vm.selectedIndex]"></content>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <content data="vm.allData[vm.selectedIndex]"></content>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <content data="vm.allData[vm.selectedIndex]"></content>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller("MyController", function () {
  this.allData = [
    "John", "Paul", "George"
  ];
})

.directive("content", function() {
  return {
    template: "<div>{{data}}</div>",
    scope: {data: "="}
  }
});

加载内容md-tabs异步

1 个答案: