Vue.js移动端左滑删除组件

developerworks 发布于2019-08-21 16:20 / 1587人阅读

摘要：移动端左滑删除组件左滑删除在移动端很常见。我们想要是当滑块没有超过删除按钮的一半时自动回到起点位置。滑动距离超过一半滑动到最大值删除按钮宽度尽量精简代码在开始之前，我们先得将弄清楚了。

Vue.js移动端左滑删除组件

左滑删除在移动端很常见。下面我们一起来封装一下这个简单的小组件。我们想要是：

当滑块没有超过删除按钮的一半时自动回到起点位置。

滑动距离超过一半滑动到最大值（删除按钮宽度）

尽量精简代码

在开始之前，我们先得将 [touchEventApi][1]弄清楚了。这个小组件中，用到了：

1.  TouchEvent.touches （表示一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的Touch对象）

2.  TouchEvent.changedTouches （一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，
    状态发生了改变的触点的 Touch 对象。）

话不多说，直接上代码:

然后是css，这里我使用的是less

到这里就全部完成了，希望对大家有帮助！不足的希望大家能够指出来！

云服务器 GPU云服务器左滑删除 datav怎么删除组件 Vue.js vue.js 属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88430.html

前端实现列表左滑删除（react）

摘要：而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过的。来判断当前是左滑还是右滑，左滑时在减小，而右滑时变大。并且记录下当前滑动的是第几项。最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~首先需要考虑的有以下几点：1）布局；2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；3）排他性，意思是某一个时间只...

everfight 2019-08-02 15:27 评论0 收藏0
前端实现列表左滑删除（react）

摘要：而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过的。来判断当前是左滑还是右滑，左滑时在减小，而右滑时变大。并且记录下当前滑动的是第几项。最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~首先需要考虑的有以下几点：1）布局；2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；3）排他性，意思是某一个时间只...

sewerganger 2019-08-23 18:28 评论0 收藏0
【Flutter组件】仿微信左滑删除组件与透明背景时的处理

摘要：本文用到的组件这是一个简单版仿微信的左滑删除的组件左滑删除组件地址仓库地址问题在上，使用仿微信样式的左滑删除组件时如果这一行的背景色是透明的，就会出现如下问题透明的下可以看到删除和编辑按钮，我们就需要处理一下。本文用到的组件：这是一个简单版仿微信的左滑删除的组件： # 左滑删除组件 left_scroll_actions: any pub地址：https://pub.dartlan...

mingzhong 2019-08-26 10:19 评论0 收藏0
小程序开发：左滑删除

摘要：，上层使用绝对定位，我们操纵属性的值来实现像左移动。，我们通过微信小程序提供的对象和个有关手指触摸的函数，，来实现随手指移动。省略数据删除部分中根据绑定的事件触发删除按钮，用户点击删除，发送请求，根据返回值对用户进行反馈。导语首先声明两点：思路以及代码，是根据资料进行一些修改以及补充，原文地址在此下面的只是 demo，各位根据自己的需要进行修改完善实现的思路摘抄如下 1...

missonce 2019-07-01 11:14 评论0 收藏0