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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
高亮度显示php源代码
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
详解Python迭代和迭代器
2016/03/28 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
详解python基础之while循环及if判断
2017/08/24 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
企业法人授权委托书
2014/04/03 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
结婚幸福感言
2015/08/01 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers