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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
详解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
用PHP+MySql编写聊天室
2006/10/09 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
javascript 写类方式之一
2009/07/05 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
名人演讲稿范文
2013/12/28 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL