IONIC subheader是我們常用的一個css 屬性，但是這個subheader的高度是固定的，當然也是可以改變的，但是如果改了subheader的告訴，還要更改content的top值，稍微有些麻煩，如果是動態告訴的subheader就麻煩了，還需要動態更改content的top數值，所以就寫了一個directive解決這個問題：
上代碼吧：
主要代碼
/**
* Created by Richard on 9/21/16.
*/
'use strict';
// @ngInject
module.exports = function() {
return {
link: function(scope, element, attrs) {
scope.$watch(function() {
let height = element[0].offsetHeight + 44;
let content = angular.element(document.querySelector('.has-subheader'));
content.css("top", height + "px");
});
}
}
};
定義directie:
.directive('customSubheader', customSubheader)
重寫css:
.bar-subheader {
height: auto;
}
使用方法：
<div custom-subheader class="bar bar-subheader"> </div>
以上所述是小編給大家介紹的IONIC自定義subheader的最佳解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！