如何使用Vue实现移动端左滑删除效果-创新互联
这篇文章给大家分享的是有关如何使用Vue实现移动端左滑删除效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
专注于为中小企业提供成都网站制作、成都网站建设、
外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业
河南免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
准备
安装vue项目过程已忽略，如果不懂vue的同学可以上官网看下：https://cn.vuejs.org/v2/guide/installation.html#NPM
我们使用安装一个webpack模板：
vue init webpack test
组件
我们创建一个左滑删除组件，在src/components目录下创建文件：deleteTemplate.vue，然后编写模板代码：
删除
我们这个模板是一个要左滑删除的列表项，绑定了手势滑动触控动作响应，在其中加入了图片、商品名称和价格等内容，以及一个删除按钮。
接下来，我们看组件中的js部分：
我们在代码中主要用到三个移动端触控事件：
touchstart : 手指放到屏幕上时触发
touchmove : 手指在屏幕上滑动式触发
touchend ：手指离开屏幕时触发
每个触控事件被触发后，会生成一个event对象，event对象里额外包括以下三个触控列表
touches : 当前屏幕上所有手指的列表
targetTouches : 当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches : 涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触控由touch对象组成，touch对象里包含着触控信息，主要属性如下：
clientX / clientY : 触摸点相对浏览器窗口的位置
pageX / pageY : 触摸点相对于页面的位置
screenX / screenY : 触摸点相对于屏幕的位置
在上述代码中还可以看到，当滑块没有超过删除按钮的一半时自动回到起点位置。点击删除后调用deleteLine删除当前行。
组件调用
我们在HelloWorld.vue中建立模板，引入组件deleteSlider，代码如下：
