Solution to gesture sliding return in Vue mobile terminal

With the popularity of mobile devices, more and more users are accustomed to using gesture sliding to switch between pages. In Vue development, the page switching method based on Vue Router generally uses the push and replace methods of routing. However, page switching implemented in this way has certain problems when the mobile gesture slides back. This article will introduce how to solve the mobile gesture sliding return problem in Vue development.

In order to solve the problem of gesture sliding return on the mobile terminal, we need to use the Vue plug-in vue-touch and vue-router plug-in. The vue-touch plug-in is Vue's encapsulation of mobile gesture operations and can recognize gesture operations on mobile devices, such as left swipe, right swipe, etc. The vue-router plug-in is a plug-in officially provided by Vue for page routing management.

First, we need to install the vue-touch and vue-router plug-ins. It can be installed through the npm command:

npm install vue-touch vue-router --save

After installing the plug-in, we need to import and register these two plug-ins in the main program file:

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

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

Next, in the routing configuration of Vue Router , we need to add a global front guard to determine whether the user slides back through gestures or clicks the back button to return when the page switches. In the global front guard, we can decide whether to slide back with a gesture or click the return button to return by judging the entry direction of the route:

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();
});

In the global front guard, we first judge that the entry direction of the route is a gesture Slide back (direction is 'back') or click the back button to return. If the gesture slide returns, we reset the direction value to empty and set the page switching animation to slide from right to left. If we return by clicking the return button, we set the page switching animation to slide from left to right, and simulate the click of the return button through the window.history.pushState method.

Finally, in each page component of Vue, we need to use the vue-touch plug-in to listen to the gesture sliding event of the mobile device, and determine whether the gesture sliding returns or slides to the next page based on the sliding distance. . In the page component, we can use the swipe method of the vue-touch plug-in to listen for left and right sliding events:

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]);
      }
    }
  }
};

In the mounted life cycle function of the page component, we can use the $watch method to listen to the page Toggle animation changes. When the page switching animation changes to sliding from right to left, we call the go method to perform gesture sliding return. When the page switching animation changes to sliding from left to right, we call the go method to perform gesture sliding to the next page.

In the go method, we first calculate the sliding distance of different screens of the mobile device. Then, we determine whether the gesture slides back or the gesture slides to the next page based on the direction of the slide. If it is a gesture sliding return, and the index of the current page is greater than 1, we call the $router.back method to perform a gesture sliding return. If the gesture is used to slide to the next page, and the index of the current page is less than the number of pages in the routing configuration, we call the $router.push method to perform the gesture to slide to the next page.

Through the above operations, we can effectively solve the problem of mobile gesture sliding return in Vue development. Using the vue-touch and vue-router plug-ins, we can easily monitor the gesture sliding event of the mobile device and determine whether the gesture sliding returns or the gesture sliding to the next page based on the sliding distance. In this way, it can improve the user experience on the mobile terminal and make page switching smoother.

The above is the detailed content of Solution to gesture sliding return in Vue mobile terminal. For more information, please follow other related articles on the PHP Chinese website!