Vue mobile terminal swipes right to return to the previous page with source code download

Sometimes when we play with mobile phones, we prefer the user operation experience brought by using gesture swiping. Vue touch directive is a lightweight VUE component for mobile device operation instructions. Use it to easily enable screen touch and swipe trigger events, improving user experience. This article combines examples to explain how to swipe the right screen on the Vue mobile terminal to return to the previous page.

View the demo  Download the source code

Installation dependencies

Install using npmvue-directive-touchComponents.

npm install vue-directive-touch --save

Introducing components

Introduced invue-directive-touch。

import touch from 'vue-directive-touch';
(touch);

use

Add a sliding event to the template.

<template>
 <div  v-touch:right="onSwipeRight">
 <transition>
  <router-view></router-view>
 </transition>
 </div>
</template>

vue-directive-touch provides the following event types:

• Click: v-touch:tap
• Long press: v-touch:long
• Swipe left: v-touch:left
• Swipe right: v-touch:right
• Slide up: v-touch:up
• Slide: v-touch:down
  

Then add the slide event method to the script part.

methods: {
  onSwipeRight () {
  this.$(-1)
  }
 }

Then we write a logical jump route on the specific page, pay attention to setting the page touch range on the specific page, so that the entire screen can be touched.

.cont{
 width: 100%;
 height: 500px;
}

Referring to the picture column of the Toutiao app, we can also set up operations such as clicking to open a new page, swiping up to open a comment window, and swiping down to close the picture.

Vue touch directive project address:/BensonDu/vue-directive-touch

Summarize

The above is the editor’s introduction to Vue mobile terminal. Swipe right on the screen to return to the previous page with source code to download. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!