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:
|
<<: MariaDB under Linux starts with the root user (recommended)
>>: Ubuntu 18.04 installs pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib
Table of contents mysql log files binlog Binlog l...
Which parameter does the rpm command use to insta...
Table of contents 1. Introduction 2. Rendering 3....
【Foreword】 If you want to use ORM to operate data...
This article shares the installation tutorial of ...
Now there are many WeChat public account operatio...
1. Basic lines 2. Special effects (the effects ar...
In the horizontal direction, you can set the cell...
1. Use the installation package to install MySQL ...
Step 1: yum install httpd -y #Install httpd servi...
Table of contents Complex query and step-by-step ...
Today I will introduce two HTML tags that I don’t...
Table of contents Preface 1. Get the length of a ...
Today a client wants to run an advertisement, and ...