ionic的start-y属性初始化页面

混合式开发移动app,要实现的是初始化页面时不展示搜索框,让页面向上移动一定位移。
<ion-content class="has-subheader" start-y="38">
</ion-content>
可以实现。
应用js也能实现:
var cont = document.getElementsByTagName("ion-content")[0];
var start_top = 53;
var end_top = 88;
var slideShow = function(obj,start,end){
var start_top = $(obj).offset().top;
obj.addEventListener('touchstart', function(event) {
event.preventDefault();
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
start_top = touch.pageY;
}
});
obj.addEventListener('touchmove', function(event) {
event.preventDefault();
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
var top = parseFloat(touch.pageY - start_top);
if(top <= 35){
obj.style.top = String(top + start) + "px";
}else{
obj.style.top = end + "px";
}
}
});
}
slideShow(cont ,start_top ,end_top );
ionic的start-y属性初始化页面的更多相关文章
- 变量声明置顶规则、函数声明及函数表达式和函数的arguments属性初始化
一.变量声明和变量赋值: if (!("a" in window)) { ; } alert(a);//a为? 你可能认为alert出来的结果是1,然后实际结果是“undefine ...
- 三十八、Linux 线程——线程属性初始化、销毁、设置和获得分离属性
38.1 线程属性初始化和销毁 #include <pthread.h> int pthread_attr_init(pthread_attr_t *attr); int pthread_ ...
- Java自学-类和对象 属性初始化
如何进行Java的属性初始化 步骤 1 : 对象属性初始化 对象属性初始化有3种 声明该属性的时候初始化 构造方法中初始化 初始化块 . public class Hero { public Stri ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
- Dynamic CRM 2013学习笔记(二十三)CRM JS智能提示(CRM 相关的方法、属性以及页面字段),及发布前调试
我们知道在CRM的js文件里引用XrmPageTemplate.js后,就可以实现智能提示,但每个js文件都引用太麻烦了,其实可以利用vs的功能让每个js文件自动实现智能提示CRM的js: 另外,我们 ...
- BOM 窗体相关属性以及页面可见区域的获取方式
1 在IE Safari Oper Chrome 都提供了screenLeft和screenTop属性: screenLeft : 相对于屏幕左边的距离 screenTop : 相对于屏幕上边的距离 ...
- 解决js动态改变dom元素属性后页面及时渲染问题
今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...
- Visual Studio 2015 前瞻 属性初始化赋值!
通常我们建立属性的时候如果带初始化值的时候我们经常会这样处理. class MyClass { private string _name = "hello world!"; pub ...
- 利用name或id属性设置页面跳转的锚点
理论准备 网页中的链接按照链接路径的不同,可以分为3种类型,分别是内部类型.锚点链接和外部链接: 按照使用对象的不同,网页中的链接又分为文本超链接,图像超链接,E-ma ...
随机推荐
- git stuff
git stuff trick git bash 无法标记复制解决办法 git bash窗口左上角图标点击,选择属性->选项->快速编辑模式 确定就ok了 Usual Commands 创 ...
- WeX5的简单介绍及UI的简单讲解
WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- js写的ajax
1.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8& ...
- MySQL DCL 整理
DCL(Data Control Language)数据库控制语言 授权,角色控制等GRANT 授权REVOKE 取消授权
- CSS样式应用
CSS样式应用的方法: (1)行内样式,将css样式直接放到标签当中,一般都是放入标签的style属性中,它是最方便的一种样式,也是最不方便修改的样式.如下: (2)内嵌式,通过将css写在网页源文件 ...
- XSS 初识
xss(跨站脚本攻击)xss是指攻击者在网页中嵌入客户端脚本,通常是javascript编写的恶意代码,当用户使用浏览器浏览被嵌入恶意代码的网页时,恶意代码将在用户的浏览器上被解析执行.重点是“脚本” ...
- ajax向后台传递数组
$.ajax({ traditional: true//这个设置为true,data:{"steps":["qwe","asd"," ...
- 关于SQLite的伪随机数
--random() 的返回值范围是:[-2^63,(2^63)-1],而通常要的是最小为 0的随机数,于是就不能直接用了,解决办法: then col else -col end) result f ...
- 使用VS2012调试ReactOS源码
目录 一 下载并安装VS2012 二 下载并安装WDK80 三 下载ReactOS0315源码 四 下载并安装RosBE211 五 用RosBE命令行编译ReactOS源码 六 用VS2012编译nt ...