IONIC自定义subheader的最佳解决方案


Posted in Javascript onSeptember 22, 2016

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 相关文章推荐
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
详解Node.js中的事件机制
Sep 22 #Javascript
AngularJS通过$sce输出html的方法
Sep 22 #Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 #Javascript
D3.js实现雷达图的方法详解
Sep 22 #Javascript
javascript函数中的3个高级技巧
Sep 22 #Javascript
JavaScript省市区三级联动菜单效果
Sep 21 #Javascript
Angular2 环境配置详细介绍
Sep 21 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python实用代码片段收集贴
2015/06/03 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
浅析Python函数式编程
2018/10/06 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
实习护理工作自我评价
2013/09/25 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
现金出纳岗位职责
2014/03/15 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
python多线程方法详解
2022/01/18 Python
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL