vue 左右滑动手机屏幕切换路由-touch事件

时间:2023-02-08 00:14:53

vue 左右滑动手机屏幕切换路由-touch事件
手机左右滑动,切换导航
以维修记录为例,当页面偏移50px而且手离开屏幕时,路由相应切换

 var router = this.$router;
      this.$refs.maintain.addEventListener('touchstart', (e) => { this.startX = e.touches[0].pageX; }) this.$refs.maintain.addEventListener('touchmove', (e) => { var moveEndX = e.changedTouches[0].pageX; var X = moveEndX - this.startX; this.$refs.maintain.style.position='relative'; if ( X < -50 ) {//左滑 this.$refs.maintain.style.left=X+'px'; }if(X>50){//右滑 this.$refs.maintain.style.left=X-50+'px'; } }) this.$refs.maintain.addEventListener('touchend', (e) => { if ( this.$refs.maintain.offsetLeft < -50) { router.push('./inspect') } if(this.$refs.maintain.offsetLeft > 50){ router.push('./equip') } else{ this.$refs.maintain.style.left=0+'px'; } })