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的最佳解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了webpack自動(dòng)化打包的相關(guān)知識(shí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-02-02
JavaScript中瀏覽器多標(biāo)簽頁通信的8種方案盤點(diǎn)
這篇文章主要為大家詳細(xì)介紹了JavaScript中瀏覽器多個(gè)標(biāo)簽頁通信的8種方案與實(shí)戰(zhàn)場(chǎng)景深度對(duì)比,文中的示例代碼簡(jiǎn)潔易懂,有需要的可以參考下2025-03-03
JS使用cookie實(shí)現(xiàn)只出現(xiàn)一次的廣告代碼效果
我們上網(wǎng)經(jīng)常會(huì)遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況，其實(shí)是運(yùn)用了Cookie 存儲(chǔ) web 頁面的用戶信息，Cookie 以名/值對(duì)形式存儲(chǔ),當(dāng)瀏覽器從服務(wù)器上請(qǐng)求 web 頁面時(shí)， 屬于該頁面的 cookie 會(huì)被添加到該請(qǐng)求中2017-04-04
瀑布流主要應(yīng)用在圖片展示頁面上。如果有一大批圖片需要展示，原始圖片尺寸不一致，又希望每張圖片都能不剪裁，完整顯示，那么就要給圖片規(guī)定一個(gè)寬度，解放它們的高度。利用網(wǎng)頁高度不限這個(gè)特性，充分利用頁面的空間，盡可能的展示多的圖片。下面我們就來詳細(xì)探討下2015-05-05
CocosCreator入門教程之用TS制作第一個(gè)游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個(gè)游戲，對(duì)TypeScript感興趣的同學(xué)，一定要看一下2021-04-04
這篇文章主要介紹了Bootstrap布局組件教程之Bootstrap下拉菜單的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
javascript實(shí)現(xiàn)的網(wǎng)站訪問量統(tǒng)計(jì)代碼
本文文章通過兩段代碼實(shí)例給大家介紹了基于javascript實(shí)現(xiàn)網(wǎng)站訪問量統(tǒng)計(jì)代碼，對(duì)js實(shí)現(xiàn)網(wǎng)站訪問量統(tǒng)計(jì)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JS小功能(操作Table--動(dòng)態(tài)添加刪除表格及數(shù)據(jù))實(shí)現(xiàn)代碼
這篇文章主要介紹了操作Table--動(dòng)態(tài)添加刪除表格及數(shù)據(jù)實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2013-11-11
用javascript實(shí)現(xiàn)XML的解析的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
本文主要介紹了javascript中apply/call和bind的使用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02