Vue モバイル端末でのジェスチャ スライド リターンの解決策

モバイル デバイスの普及に伴い、ページ間の切り替えにジェスチャー スライドを使用することに慣れているユーザーが増えています。 Vue 開発では、Vue Router に基づくページ切り替え方式では、プッシュ方式と置換方式のルーティングが一般的に使用されます。ただし、この方法で実装されたページ切り替えでは、モバイル ジェスチャがスライドして戻るときに特定の問題が発生します。この記事では、Vue 開発におけるモバイル ジェスチャのスライディング リターンの問題を解決する方法を紹介します。

モバイル端末でジェスチャがスライドして戻る問題を解決するには、Vue プラグイン vue-touch および vue-router プラグインを使用する必要があります。 vue-touch プラグインは、Vue によるモバイル ジェスチャ操作のカプセル化であり、左スワイプ、右スワイプなどのモバイル デバイス上のジェスチャ操作を認識できます。 vue-router プラグインは、ページ ルーティング管理のために Vue によって公式に提供されているプラ​​グインです。

まず、vue-touch プラグインと vue-router プラグインをインストールする必要があります。これは、npm コマンドを通じてインストールできます:

npm install vue-touch vue-router --save

プラグインをインストールした後、これら 2 つのプラグインをメイン プログラム ファイルにインポートして登録する必要があります:

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 中国語 Web サイトの他の関連記事を参照してください。