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 ...
随机推荐
- 利用python 学习数据分析 (学习四)
内容学习自: Python for Data Analysis, 2nd Edition 就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...
- 调用jdbc已经写成的方法----jdbc工具类抽取方式一
package web09; /*获取连接和释放资源的方法 */ import java.sql.Connection; import java.sql.DriverManager; import j ...
- 5、Tensorflow基础(三)神经元函数及优化方法
1.激活函数 激活函数(activation function)运行时激活神经网络中某一部分神经元,将激活信息向后传入下一层的神经网络.神经网络之所以能解决非线性问题(如语音.图像识别),本质上就是激 ...
- 2. C++11 构造函数相关
1. 继承构造函数 派生类如果要使用基类的成员函数,可以通过using声明来完成. #include <iostream> using namespace std; class Base ...
- 启动多个appium服务(同时运行多台设备)
准备: 一台真机一台模拟器(使用的是“夜神模拟器”) 先查看是否检测到设备 adb devices 由上图可看出没有检测到模拟器(夜神模拟器已开启) 可通过以下配置完成: 第一步:找到adb的 ...
- python 动态生成变量
locals() 函数会以字典类型返回当前位置的全部局部变量 createVar = locals() listTemp = [1,2,3,4] for i,s in enumerate(listTe ...
- CentOS 7 安装方式汇总
U盘安装 通过U盘安装 CentOS 的过程和安装Windows非常相似,首先将 CentOS 镜像文件刻录到U盘(或者光盘),设置固件(BIOS或者UEFI)从U盘启动,然后逐步设置即可. 使用 V ...
- json兼容ie8
今天遇到一个问题,后台传递过来的json对象,在前端解析的时候用JSON.parse(result)方法不好使,查了一下是因为ie浏览器的问题.然后在网上翻了翻,找到了这个办法,可以使这个函数在ie中 ...
- 那些H5用到的技术(6)——屏幕适配
前言长屏适配单页适配参考 前言 曾经屏幕适配一直是个头疼的问题,各种坑,各种浏览器&设备兼容问题,好在的是,随着技术&标准的不断发展,这个问题得到了极大程度的解决,这篇文章主要对之前开 ...
- Linux快速查看某条命令的版本和存放的位置(ls -l `which mvn`)
输入: ls -l `which mvn` 如图: