如何使用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,代码如下:



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

感谢各位的阅读!关于“如何使用Vue实现移动端左滑删除效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


文章名称:如何使用Vue实现移动端左滑删除效果
链接分享:http://scyanting.com/article/jhpeds.html