个人blog,欢迎关注加收藏
H5项目上滑跳转页面
框架:vue + jquery + bootstrap
export default {
name: 'home',
data () {
return {
p_demo:'',//获取页面body节点,以便加载监听
start:"",//触摸开始的坐标点
move:"",//触摸移动实时的坐标点
num:"",//触摸结束的坐标点
}
},
mounted(){
let _this = this;
let p_demo = document.getElementsByTagName('body')[0];//获取Body节点,注意通过标签名获取的节点是个伪数组,需要加一个[0]才能获取到真正的节点
p_demo.addEventListener("touchstart", function (e){ /*触摸开始*/
// console.log("触摸开始")
// console.log(e)
_this.start = e.touches[0].pageY;
// console.log(_this.start) /*得出刚触屏时距离页面顶部的距离*/
})
p_demo.addEventListener("touchmove", function (e){ /*触摸移动*/
// console.log("触摸移动")
// console.log(e)
_this.move = e.touches[0].pageY;
// console.log(_this.move) /*得出触屏结束后距离页面顶部的距离*/
})
p_demo.addEventListener("touchend", function (e){ /*触摸结束*/
console.log("触摸结束")
// console.log(e)
_this.num = _this.start - _this.move ; /*得出开始和结束距离页面顶部的差值*/
console.log(_this.num) /*得出触屏结束后距离页面顶部的距离*/
if(_this.num>15){//滑动的距离判断
console.log('跳转到下一页');
}else{//滑动距离未达到标准距离
console.log('不跳转');
}
})
}
}