Vue left slide to delete the sample code

Recently, a requirement is to add a left-handed function. Refer to the code of other old brothers, do a little improvement. Record. In order to prepare, there is not much to say, the upper code

   Delete 
/ / Get the width of the delete button, this width is the maximum distance of the slider left slider const DELBTNWIDTH = 60; Export Default {data () {return {startx: 0, // Start POS ENDX: 0, // End POS Movex: 0, // Pos DISX: 0, // Slide Dist Deleteslider: 'Transform: Translatex (0px)',};}, methods: {TouchStart (TimeStamp, EV) {EV = EV || Event; this.currslidertimestamp = timestamp; this.startx = 0; // Tounches class number, equal to 1 means there is only one finger in touch screen if (ev.Touches.Length === 1) {/ / Record start position this.startx = ev.Touches [0] .clientx; console.log (this.startx, this.disx);}}, TouchMove (TimeStamp, EV) {EV = EV || Event; IF (EV .Touches.Length === 1) {// Slide the left browser left real-time distance this.movex = ev.Touches [0].clientx; // real-time sliding distance, and the last sliding makes a connection. Preventing the second trigger, the position is not right, this.disx = this.startx - this.movex + this.disx; // If it is sliding to the right or does not slide, does not change the position IF of the slider (this.disx > 0) {IF (this.disx
< 100) { this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)'; } else { this.deleteSlider = 'transform:translateX(-100px)'; } } else { if (this.disX < -60) { this.deleteSlider = 'transform:translateX(60px)'; } else { this.deleteSlider = 'transform:translateX(' + Math.abs(this.disX) + 'px)'; } } } }, touchEnd() { //滑动完成后,滑块应该在的位置 if (this.disX < 100) { this.deleteSlider = 'transform:translateX(0px)'; this.disX = 0; } else { this.deleteSlider = 'transform:translateX(-' + DELBTNWIDTH + 'px)'; this.disX = 60; } }, }, }; . Slider-item {width: 100%; HEIGHT : 60px; border-bottom: 1px solid #eeeee; overflow: hidden; display: flex; position: relative; .content {min-width: 100%; Height: 100%; Background: Yellow; Box-Siting: Normal-box; PADDING-Right: 60px; Position: Relative; Transition-Property: All; Transition-Duration: 0.4s; Transition-Timing-function: Cubic-Bezier (0, 0.85, 0.72, 0.86); Transition-delay: 0s;. Remove {Position: Absolute; Top: 0; Right: 0; Width: 60px; Height: 60px; Background: # Fe5ba8; Text-Align: Center; Line-HEIGHT: 60PX; font-sIze: 15px; color: #ffff;}}}}
Reference example
The above is all of this article, it is desirable Everyone’s learning is helpful, I hope everyone will support Tumi Clouds.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment