使用Vue实现移动端左滑删除效果附源码

左滑删除在移动端是很常见的一种操作，常见于删除购物车中的商品，删除收藏夹

本文来源gao!%daima.com搞$代*!码9网(

中文章等等场景。我们只需要手指按住要删除的对象，然后轻轻向左滑动，便会出现删除按钮，然后点击删除按钮即可删除对象。

 点击下载源码

今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的，结合以电商平台的删除购物车商品为例，来看实现步骤。

准备

安装vue项目过程已忽略，如果不懂vue的同学可以上官网看下：https://cn.vuejs.org/v2/guide/installation.html#NPM

我们使用安装一个webpack模板：

vue init webpack test

组件

我们创建一个左滑删除组件，在src/components目录下创建文件：deleteTemplate.vue，然后编写模板代码：

  <div class="delete"> <div class="slider"> <div class="content"> <!-- 插槽中放具体项目中需要内容 --><!-- 默认插槽 --></div><div class="remove"> 删除 </div></div></div>

我们这个模板是一个要左滑删除的列表项，绑定了手势滑动触控动作响应，在其中加入了图片、商品名称和价格等内容，以及一个删除按钮。

接下来，我们看组件中的js部分：

我们在代码中主要用到三个移动端触控事件：

touchstart : 手指放到屏幕上时触发

touchmove : 手指在屏幕上滑动式触发

touchend ：手指离开屏幕时触发

每个触控事件被触发后，会生成一个event对象，event对象里额外包括以下三个触控列表

touches : 当前屏幕上所有手指的列表

targetTouches : 当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches : 涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触控由touch对象组成，touch对象里包含着触控信息，主要属性如下：

clientX / clientY : 触摸点相对浏览器窗口的位置

pageX / pageY : 触摸点相对于页面的位置

screenX / screenY : 触摸点相对于屏幕的位置

在上述代码中还可以看到，当滑块没有超过删除按钮的一半时自动回到起点位置。点击删除后调用deleteLine删除当前行。

组件调用

我们在HelloWorld.vue中建立模板，引入组件deleteSlider，代码如下：

  <div class="mylist">  <div class="li-img"></div><h3 class="li-title">{{list.title}}</h3><p class="li-price">{{list.price}}</p></div>

注意实际应用中数据源可用异步加载，在删除的时候或许要异步请求后端来真正完成删除操作。

总结

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！