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

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。