Vue mobile terminal determines the direction of finger sliding on the screen

Vue mobile terminal determines the direction of finger sliding on the screen

The vue mobile terminal determines the direction of finger sliding on the screen for your reference. The specific content is as follows

This can be used to implement the function of switching tabs by sliding the screen with your finger. For example, on JD.com's order page, these tab switches can be implemented using this

page

<div
      @touchstart="handleTouchstart"
      @touchend="handleTouchend"
      class="slotWrap"
    >
//Screen sliding//Finger pressing the screen handleTouchstart(event){
  this.startTime = Date.now()
  this.startX = event.changedTouches[0].clientX
  this.startY = event.changedTouches[0].clientY
},
//Finger leaves the screen handleTouchend(event){
  const endTime = Date.now()
  const endX = event.changedTouches[0].clientX
  const endY = event.changedTouches[0].clientY
  //Judge the duration of pressing if(endTime - this.startTime >2000){
    return
  }
  //Sliding direction let direction = "";
  //First determine whether the user's sliding distance is legal. If legal: determine the sliding direction. Note that the distance must be added with the absolute value if (Math.abs (endX - this.startX) > 10) {
    //Sliding directionif(Math.abs(endY -this.startY)>30){
      // console.log("The y direction is too offset, so you can't slide")
      return
    }else{
      direction = endX -this.startX >0?"right":"left"
    }
  }else{
    return
  }
  //The user has made a legal sliding operation // console.log('direction'+direction)
  if(direction==='left'){
    if (this.currents+1 === this.list.length) {
      return
    }else{
      this.currents++
      //Trigger event this.$emit('getData')
    }
  }
  if(direction==='right'){
    if (this.currents === 0) {
      return
    }else{
      this.currents--
      //Trigger event this.$emit('getData')
    }
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue mobile terminal realizes finger sliding effect
  • How to use fingers to slide between Vue routing pages
  • Detailed explanation of left and right sliding events on Vue mobile terminal
  • Vue mobile terminal realizes the mobile phone sliding left and right entry animation
  • How to realize left and right sliding effect on mobile terminal in Vue
  • Example code of vue2.0 mobile sliding event vue-touch
  • Vue custom mobile touch events: click, slide, long press events
  • Write a mobile inertial sliding & rebound Vue navigation bar component ly-tab
  • vue2.0 better-scroll sample code for mobile sliding
  • Vue implements a mobile terminal shield sliding mask layer example

<<:  MariaDB under Linux starts with the root user (recommended)

>>:  Ubuntu 18.04 installs pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

Recommend

Several magical uses of JS ES6 spread operator

Table of contents 1. Add attributes 2. Merge mult...

CSS pseudo-class: empty makes me shine (example code)

Anyone who has read my articles recently knows th...

Analyze the compilation and burning of Linux kernel and device tree

Table of contents 1. Prepare materials 2. Downloa...

How to monitor array changes in JavaScript

Preface When introducing defineProperty before, I...

Linux file and user management practice

1. Display the files or directories in the /etc d...

Detailed explanation of javascript knowledge points

Table of contents 1. Basic Introduction to JavaSc...

Example code of layim integrating right-click menu in JavaScript

Table of contents 1. Effect Demonstration 2. Impl...

MySQL 8.0.23 Major Updates (New Features)

Author: Guan Changlong is a DBA in the Delivery S...

Detailed explanation of the use of Vue Smooth DnD, a draggable component of Vue

Table of contents Introduction and Demo API: Cont...

Vue implements time countdown function

This article example shares the specific code of ...

Several ways to center a box in Web development

1. Record several methods of centering the box: 1...

Webpack loads css files and its configuration method

webpack loads css files and its configuration Aft...

Node+express to achieve paging effect

This article shares the specific code of node+exp...

Implementation of the Pycharm installation tutorial on Ubuntu 18.04

Method 1: Download Pycharm and install Download a...