今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤。
安装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,代码如下:
{{list.title}}
{{list.price}}
注意实际应用中数据源可用异步加载,在删除的时候或许要异步请求后端来真正完成删除操作。
本文地址:https://www.stayed.cn/item/127
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我