当前位置:网站首页>Vue.js Mobile end left slide delete component
Vue.js Mobile end left slide delete component
2020-11-06 01:22:00 【:::::::】
Vue.js The mobile end slides left to delete components
Left sliding deletion is very common on mobile terminals . Let's encapsulate this simple widget together . We want to be :
- When the slider does not exceed half of the delete button, it will automatically return to the starting position .
- Slide more than half to the maximum ( Delete button width )
- Try to simplify the code
Before we start , We have to put [touchEventApi][1] Make sure. . In this widget , Yes : 1. TouchEvent.touches ( Represent one individual TouchList object , Contains all contacts currently touching the touch plane Touch object ) 2. TouchEvent.changedTouches ( One TouchList object , Contains all the information from the last touch event to this event , Of a contact whose state has changed Touch object .)
Don't talk much , Go straight to the code :
<template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider" > <!-- The slot contains the content needed in the specific project --> <slot></slot> </div> <div class="remove" ref='remove'> Delete </div> </div> </div> </template>
And then there was css, What I'm using here is less
<style scoped lang="less" scoped> .slider{ width: 100%; height:200px; position: relative; user-select: none; .content{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background:green; z-index: 100; // Set the transition animation transition: 0.3s; } .remove{ position: absolute; width:200px; height:200px; background:red; right: 0; top: 0; color:#fff; text-align: center; font-size: 40px; line-height: 200px; } } </style>
<script type="text/ecmascript-6"> export default { data() { return { startX:0, // Touch the location endX:0, // End position moveX: 0, // Position when sliding disX: 0, // Moving distance deleteSlider: '',// The effect of sliding , Use v-bind:style="deleteSlider" } }, methods:{ touchStart(ev){ ev= ev || event //tounches An array of class , be equal to 1 At this time, there is only one finger touching the screen if(ev.touches.length == 1){ // Record the starting position this.startX = ev.touches[0].clientX; } }, touchMove(ev){ ev = ev || event; // Get the width of the delete button , This width is the maximum distance the slider slides to the left let wd=this.$refs.remove.offsetWidth; if(ev.touches.length == 1) { // Real time distance from left side of browser when sliding this.moveX = ev.touches[0].clientX // Start position minus Real time sliding distance , Get the finger offset in real time this.disX = this.startX - this.moveX; console.log(this.disX) // If it's sliding right or not , Don't change the position of the slider if(this.disX < 0 || this.disX == 0) { this.deleteSlider = "transform:translateX(0px)"; // Greater than 0, It means left slip , Now the slider starts to slide }else if (this.disX > 0) { // The specific sliding distance I take is Finger offset *5. this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)"; // The maximum can only be equal to the width of the delete button if (this.disX*5 >=wd) { this.deleteSlider = "transform:translateX(-" +wd+ "px)"; } } } }, touchEnd(ev){ ev = ev || event; let wd=this.$refs.remove.offsetWidth; if (ev.changedTouches.length == 1) { let endX = ev.changedTouches[0].clientX; this.disX = this.startX - endX; console.log(this.disX) // If the distance is less than half of the delete button , Forced back to the starting point if ((this.disX*5) < (wd/2)) { this.deleteSlider = "transform:translateX(0px)"; }else{ // More than half Slide to maximum this.deleteSlider = "transform:translateX(-"+wd+ "px)"; } } } } } </script>
It's all done here , Hopefully that helped ! I hope you can point out the deficiencies !
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- Mongodb (from 0 to 1), 11 days mongodb primary to intermediate advanced secret
- 如何将数据变成资产?吸引数据科学家
- 6.2 handleradapter adapter processor (in-depth analysis of SSM and project practice)
- 教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
- 6.1.2 handlermapping mapping processor (2) (in-depth analysis of SSM and project practice)
- Leetcode's ransom letter
- xmppmini 專案詳解:一步一步從原理跟我學實用 xmpp 技術開發 4.字串解碼祕笈與訊息包
- 小程序入门到精通(二):了解小程序开发4个重要文件
- How do the general bottom buried points do?
- Windows 10 tensorflow (2) regression analysis of principles, deep learning framework (gradient descent method to solve regression parameters)
猜你喜欢
随机推荐
Python3 e-learning case 4: writing web proxy
Let the front-end siege division develop independently from the back-end: Mock.js
多机器人行情共享解决方案
Nodejs crawler captures ancient books and records, a total of 16000 pages, experience summary and project sharing
Arrangement of basic knowledge points
I think it is necessary to write a general idempotent component
Common algorithm interview has been out! Machine learning algorithm interview - KDnuggets
Swagger 3.0 天天刷屏,真的香嗎?
High availability cluster deployment of jumpserver: (6) deployment of SSH agent module Koko and implementation of system service management
IPFS/Filecoin合法性:保护个人隐私不被泄露
大数据应用的重要性体现在方方面面
Leetcode's ransom letter
Keyboard entry lottery random draw
Mongodb (from 0 to 1), 11 days mongodb primary to intermediate advanced secret
阿里云Q2营收破纪录背后,云的打开方式正在重塑
Just now, I popularized two unique skills of login to Xuemei
How to encapsulate distributed locks more elegantly
Relationship between business policies, business rules, business processes and business master data - modern analysis
[event center azure event hub] interpretation of error information found in event hub logs
git rebase的時候捅婁子了,怎麼辦?線上等……