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的最佳解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

javascript 操作文件实现方法小结
可以通过浏览器在访问者的硬盘上创建文件 JavaScript操作文件系统创建快捷方式
2009-07-07
详解uniapp页面跳转URL传参大坑
本文主要介绍了详解uniapp页面跳转URL传参大坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
bootstrap选项卡使用方法解析
这篇文章主要为大家详细介绍了bootstrap选项卡使用方法，包括选项卡组件和底部可以切换的选项卡面板使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JavaScript变量类型以及变量作用域详解
这篇文章主要为大家详细介绍了JavaScript变量类型以及变量作用域的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
JavaScript Event Loop相关原理解析
这篇文章主要介绍了JavaScript Event Loop相关原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
IntersectionObserver实现图片懒加载的示例
下面小编就为大家带来一篇IntersectionObserver实现图片懒加载的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
小程序实现列表多个批量倒计时
这篇文章主要为大家详细介绍了小程序实现列表多个批量倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
javascript内嵌式与外链式的基本应用方式
这篇文章主要介绍了javascript内嵌式与外链式的基本应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-12-12
JS如何判断json是否为空
本文重点给大家介绍js判断json对象是否为空的知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-07-07
javascript实现点击按钮切换轮播图功能
这篇文章主要为大家详细介绍了javascript实现点击按钮切换轮播图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09