这里写图片描述
手机左右滑动,切换导航
以维修记录为例,当页面偏移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';
        }
      })
Logo

前往低代码交流专区

更多推荐