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