在 Angular Material 的 md-tabs 中使用 md-on-select 会延迟 UI

Using md-on-select in md-tabs of Angular Material delays the UI

我正在使用 md-on-selectmd-tab of Angular Material and I am passing a function to md-on-select = "function()" which contains ajax calls for loading data in that particular tab view. But this delaying the transition between tabs(default action)。

注意:观察在选项卡上激活的粉红色线(click me ),在我的情况下它被延迟了,我认为这可能是由于我写的 ajax 调用在传递给 md-on-select.

的函数中

是否有任何方法可以在选项卡之间实现平滑过渡?

HTML

    <md-content>
        <md-tabs md-dynamic-height="" md-border-bottom="">
            <md-tab label="Tab1" md-on-select="fnTab1Data()"></md-tab>
            <md-tab label="Tab2" md-on-select="fnTab2Data()"></md-tab>
            <md-tab label="Tab3" md-on-select="fnTab3Data()"></md-tab>
            <md-tab label="Tab4" md-on-select="fnTab4Data()"></md-tab>
        </md-tabs>
    </md-content>

控制器

    angular.module('myModule')
        .controller('myCtrl', ['$scope', 'myService',
            function($scope, jobDescriptionService) {
                $scope.fnTab1Data = function() {
                    myService.fnGetTab1Data(id).then(function(response) {
                        $scope.oTab1Data = response;
                    });
                };
                $scope.fnTab2Data = function() {
                    myService.fnGetTab2Data(sdata).then(function(response) {
                        $scope.oTab2Data = response;
                    });
                };
                $scope.fnTab3Data = function() {
                    myService.fnGetTab3Data().then(function(response) {
                        $scope.oTab3Data = response;
                    });
                };
                $scope.fnTab4Data = function() {
                    myService.fnGetTab4Data().then(function(response) {
                        $scope.oTab4Data = response;
                    });
                };
            }
        ])

增强 md-tabs 性能的几个技巧

  1. md-tabs
  2. 上添加属性 md-disable-animation
  3. 如果您在 md-tab 中对大型数据集进行 ng-repeat
    • 使用 ng-infinite 滚动并按需加载数据
    • 在 ng-repeat 中使用 track by

代码

<md-tabs md-disable-animation md-swipe-content="true" md-selected="selectedIndex">

  <md-tab label="first">
      <!--on demand list-->
      <div id="first-tab">
         <div infinite-scroll="addMore()" infinite-scroll-distance='2' infinite-scroll-container="'#first-tab'">
              <div ng-repeat="one in all track by one._id"
                  <!-- your code -->
              </div>
          </div>
      </div>
   </md-tab>

 <!-- other tabs -->
</md-tabs>

几个有用的链接:

  • ngInfinite 文档here
  • 查看这篇关于提高 angular 应用性能的精彩文章 here