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

MySQL restores data through binlog

Table of contents mysql log files binlog Binlog l...

JavaScript+HTML to implement student information management system

Table of contents 1. Introduction 2. Rendering 3....

Steps to use ORM to add data in MySQL

【Foreword】 If you want to use ORM to operate data...

MySQL 8.0.12 Simple Installation Tutorial

This article shares the installation tutorial of ...

JavaScript mobile H5 image generation solution explanation

Now there are many WeChat public account operatio...

HTML Several Special Dividing Line Effects

1. Basic lines 2. Special effects (the effects ar...

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

In the horizontal direction, you can set the cell...

Installation process of MySQL5.7.22 on Mac

1. Use the installation package to install MySQL ...

...

Detailed steps to install web server using Apache httpd2.4.37 on centos8

Step 1: yum install httpd -y #Install httpd servi...

Three strategies for rewriting MySQL query statements

Table of contents Complex query and step-by-step ...

HTML tags: sub tag and sup tag

Today I will introduce two HTML tags that I don’t...

Summary of 28 common JavaScript string methods and usage tips

Table of contents Preface 1. Get the length of a ...

Implementation code for adding links to FLASH through HTML (div layer)

Today a client wants to run an advertisement, and ...