Vue 모바일 단말기의 제스처 슬라이딩 리턴 솔루션

모바일 장치의 인기로 인해 점점 더 많은 사용자가 페이지 간 전환을 위해 제스처 슬라이딩을 사용하는 데 익숙해졌습니다. Vue 개발에서 Vue Router 기반의 페이지 전환 방식은 일반적으로 라우팅의 push 및 replacement 방식을 사용합니다. 그러나 이러한 방식으로 구현된 페이지 전환에는 모바일 동작이 뒤로 밀릴 때 특정 문제가 있습니다. 이 기사에서는 Vue 개발에서 모바일 제스처 슬라이딩 리턴 문제를 해결하는 방법을 소개합니다.

모바일 단말기에서 제스처 슬라이딩 리턴 문제를 해결하려면 Vue 플러그인 vue-touch 및 vue-router 플러그인을 사용해야 합니다. Vue-touch 플러그인은 Vue의 모바일 제스처 작업을 캡슐화한 것으로, 왼쪽 스와이프, 오른쪽 스와이프 등과 같은 모바일 장치의 제스처 작업을 인식할 수 있습니다. vue-router 플러그인은 페이지 라우팅 관리를 위해 Vue에서 공식적으로 제공하는 플러그인입니다.

먼저 vue-touch 및 vue-router 플러그인을 설치해야 합니다. npm 명령을 통해 설치할 수 있습니다:

npm install vue-touch vue-router --save

플러그인을 설치한 후 기본 프로그램 파일에 이 두 플러그인을 가져와 등록해야 합니다.

import Vue from 'vue';
import VueTouch from 'vue-touch';
import VueRouter from 'vue-router';

Vue.use(VueTouch);
Vue.use(VueRouter);

다음으로 Vue Router의 라우팅 구성에서 전역 추가 필요 사용자가 제스처를 통해 뒤로 슬라이드할지 또는 페이지 전환 시 돌아가기 위해 뒤로 버튼을 클릭할지 여부를 결정하기 위해 프런트 가드가 제공됩니다. 글로벌 프론트가드에서는 경로의 진입 방향을 판단하여 제스처 슬라이드로 복귀할지, 복귀 버튼을 클릭할지 결정할 수 있습니다.

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  const direction = router.app.$options.direction || '';

  if (direction === 'back') {
    // 手势滑动返回
    router.app.$options.direction = '';
    router.app.$options.transition = 'slide-right';
  } else {
    // 点击返回按钮返回
    router.app.$options.transition = 'slide-left';
    window.history.pushState(null, '', location.href);
  }

  next();
});

글로벌 프론트가드에서는 먼저 경로의 진입 방향이 제스처 슬라이드 복귀(방향은 '뒤로') 또는 뒤로 버튼을 클릭하여 돌아갑니다. 제스처 슬라이드가 반환되면 방향 값을 공백으로 재설정하고 페이지 전환 애니메이션을 오른쪽에서 왼쪽으로 슬라이드하도록 설정합니다. 리턴 버튼을 클릭하여 복귀하는 경우 페이지 전환 애니메이션을 왼쪽에서 오른쪽으로 슬라이드하도록 설정하고 window.history.pushState 메소드를 통해 리턴 버튼 클릭을 시뮬레이션합니다.

마지막으로 Vue의 각 페이지 구성 요소에서 vue-touch 플러그인을 사용하여 모바일 장치의 제스처 슬라이딩 이벤트를 수신하고 제스처 슬라이딩이 반환되는지 또는 다음 페이지로 슬라이드되는지를 결정해야 합니다. 슬라이딩 거리. 페이지 구성 요소에서 vue-touch 플러그인의 스와이프 메서드를 사용하여 왼쪽 및 오른쪽 슬라이딩 이벤트를 수신할 수 있습니다.

export default {
  mounted() {
    this.$watch('$options.transition', (to, from) => {
      if (to === 'slide-right') {
        this.go(-1);
      } else if (to === 'slide-left') {
        this.go(1);
      }
    });
  },
  methods: {
    go(delta) {
      const distance = window.innerWidth * 0.3; // 适应不同设备的滑动距离

      if (delta === -1 && this.$route.meta.index > 1) {
        // 手势滑动返回到上一页面
        this.$router.back();
      } else if (delta === 1 && this.$route.meta.index < this.$router.options.routes.length) {
        // 手势滑动到下一页面
        this.$router.push(this.$router.options.routes[this.$route.meta.index + 1]);
      }
    }
  }
};

페이지 구성 요소에 탑재된 수명 주기 기능에서 $watch 메서드를 사용하여 페이지 전환 애니메이션의 변경 사항을 수신합니다. 페이지 전환 애니메이션이 오른쪽에서 왼쪽으로 슬라이딩하는 것으로 변경되면 go 메소드를 호출하여 슬라이딩 리턴 동작을 수행합니다. 페이지 전환 애니메이션이 왼쪽에서 오른쪽으로 슬라이딩하는 것으로 변경되면 go 메소드를 호출하여 다음 페이지로 슬라이딩하는 동작을 수행합니다.

go 메소드에서는 먼저 모바일 장치의 다양한 화면의 슬라이딩 거리를 계산합니다. 그런 다음 슬라이드 방향에 따라 제스처가 뒤로 슬라이드되는지 아니면 다음 페이지로 슬라이드되는지를 결정합니다. 제스처 슬라이딩 리턴이고 현재 페이지의 인덱스가 1보다 큰 경우 $router.back 메소드를 호출하여 제스처 슬라이딩 리턴을 수행합니다. 다음 페이지로 슬라이드하는 동작을 사용하고 현재 페이지의 인덱스가 라우팅 구성의 페이지 수보다 작은 경우 $router.push 메서드를 호출하여 다음 페이지로 슬라이드하는 동작을 수행합니다.

위 작업을 통해 Vue 개발에서 모바일 제스처 슬라이딩 리턴 문제를 효과적으로 해결할 수 있습니다. vue-touch 및 vue-router 플러그인을 사용하면 모바일 장치의 제스처 슬라이딩 이벤트를 쉽게 모니터링하고 슬라이딩 거리에 따라 제스처 슬라이딩이 반환되는지 또는 제스처가 다음 페이지로 슬라이딩하는지 확인할 수 있습니다. 이러한 방식으로 모바일 단말기의 사용자 경험을 향상시키고 페이지 전환을 보다 원활하게 만들 수 있습니다.

위 내용은 Vue 모바일 단말기의 제스처 슬라이딩 리턴 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!