在 Angular Material 的 md-tabs 中使用 md-on-select 会延迟 UI
Using md-on-select in md-tabs of Angular Material delays the UI
我正在使用 md-on-select
和 md-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 性能的几个技巧
- 在 md-tabs
上添加属性 md-disable-animation
- 如果您在 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>
几个有用的链接:
我正在使用 md-on-select
和 md-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 性能的几个技巧
- 在 md-tabs 上添加属性 md-disable-animation
- 如果您在 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>
几个有用的链接: