H5上滑跳转页面的实现

个人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('不跳转');
                }

        })
  }
}