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 */
}
})
推荐阅读
-
php 页面跳转 本土windows 环境正常,上传linux 服务器上跳转不了
-
微信公众号H5页面跳转至app的某个页面,如果手机内没有app,则进入下载页面功能的实现教程
-
小程序实现页面跳转并可以返回上一层的方法
-
h5页面唤起app如果没安装就跳转下载(iOS和Android)
-
javascript 实现页面跳转,禁止返回上一页【简记】
-
使用Chrome开发者工具远程调试原生Android上的H5页面
-
H5页面跳转小程序分享-山东标梵互动
-
Android webview嵌套一个h5的聊天页面,解决获取键盘的时候,布局整体上移
-
H5上滑跳转页面
-
php 页面跳转 本地windows 环境正常,上传linux 服务器上跳转不了