当前位置:网站首页>Vue.js移动端左滑删除组件
Vue.js移动端左滑删除组件
2020-11-06 01:22:00 【:::::::】
Vue.js移动端左滑删除组件
左滑删除在移动端很常见。下面我们一起来封装一下这个简单的小组件。我们想要是:
- 当滑块没有超过删除按钮的一半时自动回到起点位置。
- 滑动距离超过一半滑动到最大值(删除按钮宽度)
- 尽量精简代码
在开始之前,我们先得将 [touchEventApi][1]弄清楚了。这个小组件中,用到了: 1. TouchEvent.touches (表示一 个 TouchList 对象,包含了所有当前接触触摸平面的触点的Touch对象) 2. TouchEvent.changedTouches (一个 TouchList 对象,包含了代表所有从上一次触摸事件到此次事件过程中, 状态发生了改变的触点的 Touch 对象。)
话不多说,直接上代码:
<template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider" > <!-- 插槽中放具体项目中需要内容 --> <slot></slot> </div> <div class="remove" ref='remove'> 删除 </div> </div> </div> </template>
然后是css,这里我使用的是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; // 设置过渡动画 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, //触摸位置 endX:0, //结束位置 moveX: 0, //滑动时的位置 disX: 0, //移动距离 deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider" } }, methods:{ touchStart(ev){ ev= ev || event //tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕 if(ev.touches.length == 1){ // 记录开始位置 this.startX = ev.touches[0].clientX; } }, touchMove(ev){ ev = ev || event; //获取删除按钮的宽度,此宽度为滑块左滑的最大距离 let wd=this.$refs.remove.offsetWidth; if(ev.touches.length == 1) { // 滑动时距离浏览器左侧实时距离 this.moveX = ev.touches[0].clientX //起始位置减去 实时的滑动的距离,得到手指实时偏移距离 this.disX = this.startX - this.moveX; console.log(this.disX) // 如果是向右滑动或者不滑动,不改变滑块的位置 if(this.disX < 0 || this.disX == 0) { this.deleteSlider = "transform:translateX(0px)"; // 大于0,表示左滑了,此时滑块开始滑动 }else if (this.disX > 0) { //具体滑动距离我取的是 手指偏移距离*5。 this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)"; // 最大也只能等于删除按钮宽度 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 ((this.disX*5) < (wd/2)) { this.deleteSlider = "transform:translateX(0px)"; }else{ //大于一半 滑动到最大值 this.deleteSlider = "transform:translateX(-"+wd+ "px)"; } } } } } </script>
到这里就全部完成了,希望对大家有帮助!不足的希望大家能够指出来!
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1715164
边栏推荐
猜你喜欢
从海外进军中国,Rancher要执容器云市场牛耳 | 爱分析调研
自然语言处理之命名实体识别-tanfordcorenlp-NER(一)
Pattern matching: The gestalt approach一种序列的文本相似度方法
通过深层神经网络生成音乐
2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
01 . Go语言的SSH远程终端及WebSocket
Using Es5 to realize the class of ES6
接口压力测试:Siege压测安装、使用和说明
Pycharm快捷键 自定义功能形式
Grouping operation aligned with specified datum
随机推荐
網路程式設計NIO:BIO和NIO
制造和新的自动化技术是什么?
6.8 multipartresolver file upload parser (in-depth analysis of SSM and project practice)
TRON智能钱包PHP开发包【零TRX归集】
The practice of the architecture of Internet public opinion system
Query意图识别分析
Cos start source code and creator
小白量化投资交易入门课(python入门金融分析)
词嵌入教程
数据产品不就是报表吗?大错特错!这分类里有大学问
【Flutter 實戰】pubspec.yaml 配置檔案詳解
(2)ASP.NET Core3.1 Ocelot路由
xmppmini 專案詳解:一步一步從原理跟我學實用 xmpp 技術開發 4.字串解碼祕笈與訊息包
事半功倍:在没有机柜的情况下实现自动化
7.2.2 compressing static resources through gzipresourceresolver
Jmeter——ForEach Controller&Loop Controller
Polkadot series (2) -- detailed explanation of mixed consensus
Dapr實現分散式有狀態服務的細節
Grouping operation aligned with specified datum
面经手册 · 第12篇《面试官,ThreadLocal 你要这么问,我就挂了!》