IONIC自定义subheader的最佳解决方案
更新时间：2016年09月22日 09:29:27 作者：天外野草
本文重点给大家介绍IONIC自定义subheader的最佳解决方案，本文实例讲解，介绍的非常详细，感兴趣的朋友一起看看吧
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的最佳解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了webpack自动化打包的相关知识，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-02-02
这篇文章主要为大家详细介绍了JavaScript中浏览器多个标签页通信的8种方案与实战场景深度对比,文中的示例代码简洁易懂,有需要的可以参考下2025-03-03
我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况，其实是运用了Cookie 存储 web 页面的用户信息，Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中2017-04-04
瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。下面我们就来详细探讨下2015-05-05
这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏，对TypeScript感兴趣的同学，一定要看一下2021-04-04
这篇文章主要介绍了Bootstrap布局组件教程之Bootstrap下拉菜单的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本文文章通过两段代码实例给大家介绍了基于javascript实现网站访问量统计代码，对js实现网站访问量统计相关知识感兴趣的朋友一起学习吧2015-12-12
JS小功能(操作Table--动态添加删除表格及数据)实现代码
这篇文章主要介绍了操作Table--动态添加删除表格及数据实现代码，有需要的朋友可以参考一下2013-11-11
用javascript实现XML的解析的实现代码，需要的朋友可以参考下。2009-11-11
本文主要介绍了javascript中apply/call和bind的使用。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论