IONIC自定義subheader的最佳解決方案
更新時間：2016年09月22日 09:29:27 作者：天外野草
本文重點給大家介紹IONIC自定義subheader的最佳解決方案，本文實例講解，介紹的非常詳細，感興趣的朋友一起看看吧
IONIC subheader是我們常用的一個css 屬性，但是這個subheader的高度是固定的，當然也是可以改變的，但是如果改了subheader的告訴，還要更改content的top值，稍微有些麻煩，如果是動態(tài)告訴的subheader就麻煩了，還需要動態(tài)更改content的top數(shù)值，所以就寫了一個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的最佳解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
可以通過瀏覽器在訪問者的硬盤上創(chuàng)建文件 JavaScript操作文件系統(tǒng)創(chuàng)建快捷方式2009-07-07
本文主要介紹了詳解uniapp頁面跳轉URL傳參大坑，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了bootstrap選項卡使用方法，包括選項卡組件和底部可以切換的選項卡面板使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了JavaScript變量類型以及變量作用域的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了JavaScript Event Loop相關原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
IntersectionObserver實現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)硪黄狪ntersectionObserver實現(xiàn)圖片懶加載的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了小程序實現(xiàn)列表多個批量倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了javascript內(nèi)嵌式與外鏈式的基本應用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
本文重點給大家介紹js判斷json對象是否為空的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊按鈕切換輪播圖功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09