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

Vue mobile terminal realizes finger sliding effect

This article example shares the specific code for...

HTML tag default style arrangement

html, address,blockquote,body, dd, div,dl, dt, fie...

How to deploy redis in linux environment and install it in docker

Installation Steps 1. Install Redis Download the ...

How to implement the prototype pattern in JavaScript

Overview The prototype pattern refers to the type...

MySQL common backup commands and shell backup scripts sharing

To back up multiple databases, you can use the fo...

CSS makes tips boxes, bubble boxes, and triangles

Sometimes our pages will need some prompt boxes o...

MySQL multi-table join query example explanation

In actual projects, there are relationships betwe...

Let the web page redirect to other pages after opening for a few seconds

Just add the following code to achieve it. Method ...

Detailed explanation of how to view the current number of MySQL connections

1. View the detailed information of all current c...

Tutorial on using Multitail command on Linux

MultiTail is a software used to monitor multiple ...

A simple way to implement all functions of shopping cart in Vue

The main functions are as follows: Add product in...

Several ways to remove the dotted box that appears when clicking a link

Here are a few ways to remove it: Add the link dir...

Nginx local directory mapping implementation code example

Sometimes you need to access some static resource...