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设计模式之建造者模式介绍,将一个复杂对象的构造与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式,需要的朋友可以参考下2014-12-12
JavaScript语句可以不以;结尾的烦恼...2007-03-03
从JavaScript纯函数解析最深刻的函子 Monad实例
这篇文章主要为大家介绍了从JavaScript纯函数解析最深刻的函子 Monad实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了Three.js实现3D机房效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
在javascript中涉及字符串大小写转换的方法有4个：toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我们主要来用下toUpperCase()和toLowerCase()方法。2015-05-05
这篇文章主要为大家详细介绍了微信小程序实现登陆注册滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
跟我学习javascript的异步脚本加载，告诉大家如何使自己的站点更快捷，以及最简单的方法 利用什么样的工具达到预期效果，想一探究竟的朋友可以参考一下这篇文章。2015-11-11
如果编程加入了时间的概念就一切变得非常复杂。通常我们的程序是飞快地解析执行，一毫秒紧接着一毫秒，从上至下地执行，这称之为同步。但如果我们想让后台的程序不等前面的程序执行，就执行呢，于是就有了异步的概念。2010-06-06
这篇文章主要介绍了ES6顶层对象、global对象,结合实例形式分析了ES6顶层对象与global对象的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
这篇文章主要介绍了在webstorm开发微信小程序之使用阿里自定义字体图标 的相关资料,需要的朋友可以参考下2018-11-11
最新评论