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 ...
随机推荐
- 新版 iPad Pro 弯了,苹果表示这是正常现象……
简评:苹果上个月才发布的新版 iPad Pro 出问题了.有用户抱怨说,iPad 出现了机身弯曲.然而苹果公司认为这并不会影响性能,所以坚持这不是一个缺陷,emmm-- 虽然苹果公司的品控一直为人称道 ...
- Libra的第一天
wuli乖乖,今天是你降生第一天,以后的几年可能我们都会朝夕相处,你的成长就是我的向上,一起加油吧
- 51.RocketMQ 顺序消费
大部分的员工早上的心情可能不会很好,因为这时想到还有很多事情要做,压力会大点,一般到下午4点左右,状态会是一天中最好的,因为这时大部分的工作做得差不多了,又快要下班了,当然也不是绝对.要注意记录各下属 ...
- ES6 三层for循环的链式写法
假设有一个很复杂的数据,并且数据嵌套层数很多.如何避免用三层for循环呢? 有以下梨子,我们需要找到val值为12的,这个对象? 'use strict' let groups = [{ conten ...
- pytest文档博客链接
关于pytest的博客: https://www.cnblogs.com/yoyoketang/tag/pytest/default.html?page=2
- RocketMQ学习笔记(一)eclipse版的quickstart
学而时习之,不亦说乎! 自己搭建个学习用的RocketMQ总是很麻烦,需要虚拟机环境,网络,需要安装rocketmq,启动.时间久了再去看,又不知道这个虚拟机是干嘛的了. 直接在eclipse中启动, ...
- MONO MessageBox 类
MessageBox类,负责提示各种消息. using System; using Android.App; using Android.Content; namespace Box { publ ...
- Jexus进程守护工具jws.guard
一个运行中的进程,难免会因为各种各样的原因无缘无故的宕掉(比如网站瞬间的负载过高.内存不足等),而Jexus宕掉的后果往往只有一个:对外提供服务的网站无法访问了.因此,我们需要最大限度的保障我们的网站 ...
- (转)漫谈JVM
漫谈JVM 原文:https://liuzhengyang.github.io/2016/10/05/gossip-jvm/ 背景介绍 JVM已经是Java开发的必备技能了,JVM相当于Java的操作 ...
- javascript的JSON对象
JSON包含用于解析JSON(javascript object notation)的方法,将值转换成JSON.JSON不可以被调用或者用作构造函数. JSON对象保存在大括号内,JSON数组保存在中 ...