本篇文章主要介绍了Vue.js移动端左滑删除组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
左滑删除在移动端很常见。下面我们一起来封装一下这个简单的小组件。我们想要是：
- 当滑块没有超过删除按钮的一半时自动回到起点位置。
- 滑动距离超过一半滑动到最大值（删除按钮宽度）
- 尽量精简代码
效果如下：
在开始之前，我们先得将 [touchEventApi][1]弄清楚了。这个小组件中，用到了：
1. TouchEvent.touches （表示一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的Touch对象）
2. TouchEvent.changedTouches （一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，
状态发生了改变的触点的 Touch 对象。）
话不多说，直接上代码:
<div class="delete"> <div class="slider"> <div class="content"> <!-- 插槽中放具体项目中需要内容 --></div><div class="remove"> 删除 </div></div></div>
然后是css，这里我使用的是less
.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; <p>本文来源gao!%daima.com搞$代*!码9网(</p>// 设置过渡动画 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; } }
以上就是Vue.js移动端左滑删除组件的实现代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue.js移动端左滑删除组件的实现代码
转载请注明原文链接：Vue.js移动端左滑删除组件的实现代码
