H5上滑跳转页面
方法一:
jquery方法
movePage($('body'));
function movePage(dom) {
var startY, moveY, moveSpave;
dom.on("touchstart", function(e) {
startY = e.originalEvent.touches[0].pageY; return startY;
});
dom.on("touchmove", function(e) {
moveY = e.originalEvent.touches[0].pageY;
moveSpave = startY - moveY;
if (moveSpave > 15) {
location.href = 'main.html'; /* 跳转到main.html */
}
});
}
方法二:
原生方法
var strat,move,num; /*定义三个变量, 记录开始、结束距离顶部的距离*/
div_demo.addEventListener("touchstart", function (e){ /*触摸开始*/
console.log("触摸开始")
// console.log(e)
start = e.touches[0].pageY;
console.log(start) /*得出刚触屏时距离页面顶部的距离*/
})
div_demo.addEventListener("touchmove", function (e){ /*触摸移动*/
console.log("触摸移动")
// console.log(e)
move = e.touches[0].pageY;
console.log(move) /*得出触屏结束后距离页面顶部的距离*/
})
div_demo.addEventListener("touchend", function (e){ /*触摸结束*/
console.log("触摸结束")
// console.log(e)
num = start - move ; /*得出开始和结束距离页面顶部的差值*/
if(num>15){
location.href="main.html" /* 跳转到main.html */
}
})
H5上滑跳转页面的更多相关文章
- h5上滑刷新(分页)
$('.dom').append('<div class="loadingwrap" id="loading" style="display:n ...
- JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址
JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...
- [vue--开发记录]使用location.href修改地址跳转页面在ie上遇到的坑
管理后台项目上在用vue2.0开发,因为刚转vue2.0,不是太熟悉.在跳转页面的时候直接用location.href来修改地址跳转,在chrome和火狐上展现都是正常的.后面因为说要兼容到IE9,就 ...
- ios开发中APP底部上滑不能调出如WiFi、蓝牙、播放等的设置页面的解决的方法
在开发的APP中我们通常通过手动底部上滑来调出WiFi.蓝牙.飞行模式等的设置页面.有时我们开发的APP无法调出. 解决的方法: 进入iPhone "设置" --> &quo ...
- js实现页面的上滑下拉功能
这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...
- Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...
- React Native学习(三)—— 使用导航器Navigation跳转页面
本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
随机推荐
- 使用deque模块固定队列长度,用headq模块来查找最大或最小的N个元素以及实现一个优先级排序的队列
一. deque(双端队列) 1. 使用 deque(maxlen=N)会新建一个固定大小的队列.当新的元素加入并且这个队列已满的时候,最老的元素会自动被移除掉 >>> from c ...
- jdk命令行工具(一)
1.概述 熟悉java开发的人应该都知道在jdk的bin目录下有许多的工具,这些工具主要用于监视虚拟机和故障处理.这些故障处理工具被Sun公司称作为“礼物”附赠给JDK的使用者,并在软件的使用说明中把 ...
- Eclipse署动态web项目方法
和MyEclipse不一样,在Eclipse中做的Web项目默认是不支持将项目发布到Web服务器上的,会发布到工作空间的某个目录,因此无法在外部启动Tomcat来运行Web项目,只有打开Eclipse ...
- 总结day26 ----验证客户端的合法性,已经操作系统,进程的简单初识别
前情提要 一:验证客户端的合法性: # .需要认证 # 程序和用户打交道的时候才会用到用户认证 # 对所有的客户端进行统一的认证 # # 我现在要做的事情 # 写一个server端 # 写一个clie ...
- delphi 10.2 ----简单的叠乘例子
unit Unit11; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...
- spring中scope的prototype与singleton区别
最近在研究单例模式,突然想起项目中以下配置,scope="singleton" 和 scope="prototype"到底有何区别呢?以下做下简要分析. < ...
- lnmp环境搭建错误集合
错误1: 页面显示:No input file specified nginx错误日志:FastCGI sent in stderr: "PHP message: PHP Warning: ...
- 架构师养成记--22.客户端与服务器端保持连接的解决方案,netty的ReadTimeoutHandler
概述 保持客户端与服务器端连接的方案常用的有3种 1.长连接,也就是客户端与服务器端一直保持连接,适用于客户端比较少的情况. 2.定时段连接,比如在某一天的凌晨建立连接,适用于对实时性要求不高的情况. ...
- vs2010和opencv2.4.9配置
1.下载安装opencv2.4.9 直接到官网上下载opencv,我下载的是opencv2.4.9版本,然后进行安装,opencv的安装其实就是解压,我解压的路径是D:\opencv249.解压完成后 ...
- ReactNative常用组件库 victory-native 图表
victory-native 是不错的图表组件,支持很多种图表 地址: https://github.com/FormidableLabs/victory-native 先安装 react-nativ ...