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获取图片大小的函数代码
Sep 20 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 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
php文件上传的例子及参数详解
2013/12/12 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
php集成开发环境详解
2019/09/24 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python函数和模块的使用总结
2019/05/20 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
出生公证书
2015/01/23 职场文书
趵突泉导游词
2015/02/03 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle