当前位置:网站首页>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 .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- Architecture article collection
- 一篇文章带你了解HTML表格及其主要属性介绍
- Vue 3 responsive Foundation
- I think it is necessary to write a general idempotent component
- 2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
- ES6学习笔记(五):轻松了解ES6的内置扩展对象
- Python Jieba segmentation (stuttering segmentation), extracting words, loading words, modifying word frequency, defining thesaurus
- I've been rejected by the product manager. Why don't you know
- After reading this article, I understand a lot of webpack scaffolding
- 做外包真的很难,身为外包的我也无奈叹息。
猜你喜欢
2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
Face to face Manual Chapter 16: explanation and implementation of fair lock of code peasant association lock and reentrantlock
“颜值经济”的野望:华熙生物净利率六连降,收购案遭上交所问询
Examples of unconventional aggregation
I've been rejected by the product manager. Why don't you know
华为云“四个可靠”的方法论
Can't be asked again! Reentrantlock source code, drawing a look together!
Not long after graduation, he earned 20000 yuan from private work!
EOS创始人BM: UE,UBI,URI有什么区别?
采购供应商系统是什么?采购供应商管理平台解决方案
随机推荐
小程序入门到精通(二):了解小程序开发4个重要文件
100元扫货阿里云是怎样的体验?
Architecture article collection
CCR炒币机器人:“比特币”数字货币的大佬,你不得不了解的知识
Using consult to realize service discovery: instance ID customization
Brief introduction of TF flags
Polkadot series (2) -- detailed explanation of mixed consensus
Real time data synchronization scheme based on Flink SQL CDC
合约交易系统开发|智能合约交易平台搭建
Filecoin最新动态 完成重大升级 已实现四大项目进展!
如何将数据变成资产?吸引数据科学家
vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
How to become a data scientist? - kdnuggets
htmlcss
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
一篇文章带你了解CSS 渐变知识
Every day we say we need to do performance optimization. What are we optimizing?
In order to save money, I learned PHP in one day!
Analysis of react high order components
How to select the evaluation index of classification model