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
This article example shares the specific code for...
html, address,blockquote,body, dd, div,dl, dt, fie...
Installation Steps 1. Install Redis Download the ...
This error is often encountered by novices. This ...
Overview The prototype pattern refers to the type...
To back up multiple databases, you can use the fo...
1. Introduction table_cache is a very important M...
Sometimes our pages will need some prompt boxes o...
In actual projects, there are relationships betwe...
Just add the following code to achieve it. Method ...
1. View the detailed information of all current c...
MultiTail is a software used to monitor multiple ...
The main functions are as follows: Add product in...
Here are a few ways to remove it: Add the link dir...
Sometimes you need to access some static resource...