方法一:

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上滑跳转页面的更多相关文章

  1. h5上滑刷新(分页)

    $('.dom').append('<div class="loadingwrap" id="loading" style="display:n ...

  2. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  3. [vue--开发记录]使用location.href修改地址跳转页面在ie上遇到的坑

    管理后台项目上在用vue2.0开发,因为刚转vue2.0,不是太熟悉.在跳转页面的时候直接用location.href来修改地址跳转,在chrome和火狐上展现都是正常的.后面因为说要兼容到IE9,就 ...

  4. ios开发中APP底部上滑不能调出如WiFi、蓝牙、播放等的设置页面的解决的方法

    在开发的APP中我们通常通过手动底部上滑来调出WiFi.蓝牙.飞行模式等的设置页面.有时我们开发的APP无法调出. 解决的方法: 进入iPhone "设置" --> &quo ...

  5. js实现页面的上滑下拉功能

    这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...

  6. Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面

    1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

  7. React Native学习(三)—— 使用导航器Navigation跳转页面

    本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...

  8. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  9. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

随机推荐

  1. $.ajax()——超时设置,增加 loading 提升体验

    前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...

  2. Spark构成

    RDD Spark基本的数据结构叫弹性分布式数据集(Resilient Distributed Datasets,简称RDD). 概念: 一个分布于集群节点的只读数据集合,并以容错的.并行的方式进行维 ...

  3. 并发编程>>概念准备(一)

    工于其善,必先利器 1.并发和并行的区别 并行:同一时间点执行多个任务(CPU多核或多个CPU同时执行多个任务) 并发:同一时间段内行多个任务(单核同时执行多个任务) 2.同步和异步的区别 同步:执行 ...

  4. 总博客 wjyyy

    更多文章可见http://www.wjyyy.top/

  5. smtp自动发送邮件demo

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  6. xilinx DMA IP核(二) —— 文档阅读

    本笔记不记录DMA的Scatter/Gather特性.DMA上有三种总线:AXI4-LIte(对寄存器进行配置),AXI4-Memory Map(用于与内存交互)和AXI4 Stream(用于与外设交 ...

  7. 什么是WCF(转)

    什么是WCF(Windows Communication Foundation(WCF)) 大家可以百度一下了解什么是WCF.当然有些人看到密密麻麻的黑框白字就懒的读.即使读了 可能也没明白确切的含义 ...

  8. C# 字符串类型介绍与操作

    一.关于字符串操作的方法 System.String类提供了很多工具方法,包括返回字符数据长度,查找当前字符串中的子字符串和转换大小写等方法. 在String类中常用的比较字符串的方法主要有Compa ...

  9. 《Algorithms算法》笔记:元素排序(4)——凸包问题

    <Algorithms算法>笔记:元素排序(4)——凸包问题 Algorithms算法笔记元素排序4凸包问题 凸包问题 凸包问题的应用 凸包的几何性质 Graham 扫描算法 代码 凸包问 ...

  10. hadoop-2.6.0.tar.gz的集群搭建(3节点)(不含zookeeper集群安装)

    前言 本人呕心沥血所写,经过好一段时间反复锤炼和整理修改.感谢所参考的博友们!同时,欢迎前来查阅赏脸的博友们收藏和转载,附上本人的链接http://www.cnblogs.com/zlslch/p/5 ...