使用Vue实现移动端左滑删除效果附源码
2019/6/26 23:03:17
本文主要是介绍使用Vue实现移动端左滑删除效果附源码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景。我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象。
今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤。
准备
安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM
我们使用安装一个webpack模板:
vue init webpack test
组件
我们创建一个左滑删除组件,在src/components目录下创建文件:deleteTemplate.vue,然后编写模板代码:
<template> <div class="delete"> <div class="slider"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider"> <!-- 插槽中放具体项目中需要内容 --> <slot name="img"></slot> <slot name="title"></slot> <slot name="price"></slot> <!-- 默认插槽 --> <slot></slot> </div> <div class="remove" ref='remove' @click="deleteLine"> 删除 </div> </div> </div> </template>
我们这个模板是一个要左滑删除的列表项,绑定了手势滑动触控动作响应,在其中加入了图片、商品名称和价格等内容,以及一个删除按钮。
接下来,我们看组件中的js部分:
<script> export default { props: ['index'], data() { return { startX: 0, //触摸位置 endX: 0, //结束位置 moveX: 0, //滑动时的位置 disX: 0, //移动距离 deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider" } }, methods:{ touchStart(ev){ ev = ev || event //tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕 if(ev.touches.length == 1){ // 记录开始位置 this.startX = ev.touches[0].clientX; } }, touchMove(ev){ ev = ev || event; //获取删除按钮的宽度,此宽度为滑块左滑的最大距离 let wd = this.$refs.remove.offsetWidth; if(ev.touches.length == 1) { // 滑动时距离浏览器左侧实时距离 this.moveX = ev.touches[0].clientX //起始位置减去 实时的滑动的距离,得到手指实时偏移距离 this.disX = this.startX - this.moveX; //console.log(this.disX) // 如果是向右滑动或者不滑动,不改变滑块的位置 if (this.disX < 0 || this.disX == 0) { this.deleteSlider = "transform:translateX(0px)"; } else if (this.disX > 0) {// 大于0,表示左滑了,此时滑块开始滑动 //具体滑动距离我取的是 手指偏移距离*5。 this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)"; // 最大也只能等于删除按钮宽度 if (this.disX*5 >= wd) { this.deleteSlider = "transform:translateX(-" +wd+ "px)"; } } } }, touchEnd(ev){ ev = ev || event; let wd = this.$refs.remove.offsetWidth; if (ev.changedTouches.length == 1) { let endX = ev.changedTouches[0].clientX; this.disX = this.startX - endX; //console.log(this.disX) //如果距离小于删除按钮一半,强行回到起点 if ((this.disX*5) < (wd/2)) { this.deleteSlider = "transform:translateX(0px)"; }else{ //大于一半 滑动到最大值 this.deleteSlider = "transform:translateX(-"+wd+ "px)"; } } }, deleteLine (){ this.deleteSlider = "transform:translateX(0px)"; this.$emit('deleteLine'); } } } </script>
我们在代码中主要用到三个移动端触控事件:
touchstart : 手指放到屏幕上时触发
touchmove : 手指在屏幕上滑动式触发
touchend :手指离开屏幕时触发
每个触控事件被触发后,会生成一个event对象,event对象里额外包括以下三个触控列表
touches : 当前屏幕上所有手指的列表
targetTouches : 当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches : 涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触控由touch对象组成,touch对象里包含着触控信息,主要属性如下:
clientX / clientY : 触摸点相对浏览器窗口的位置
pageX / pageY : 触摸点相对于页面的位置
screenX / screenY : 触摸点相对于屏幕的位置
在上述代码中还可以看到,当滑块没有超过删除按钮的一半时自动回到起点位置。点击删除后调用deleteLine删除当前行。
组件调用
我们在HelloWorld.vue中建立模板,引入组件deleteSlider,代码如下:
<template> <div class="mylist"> <delete-slider v-for="(list, index) in dataList" :key="index" @deleteLine="deleteLine(index, list.id)"> <div class="li-img" slot="img"><img :src="list.img" alt=""></div> <h3 class="li-title" slot="title">{{list.title}}</h3> <p class="li-price" slot="price">{{list.price}}</p> </delete-slider> </div> </template> <script> import deleteSlider from '@/components/deleteTemplate.vue' export default { components: { deleteSlider }, data () { return { dataList: [ { id: 1, img: 'static/a1.jpg', title: '法国专柜2019夏季新款修身显瘦气质包臀短裙镂空蕾丝性感连衣裙子', price: '399.00' }, { id: 2, img: 'static/a2.jpg', title: 'VERAMOON 亮片印花短袖连衣裙女夏甜美露背性感泡泡袖修身短裙', price: '689.00' }, { id: 3, img: 'static/a3.jpg', title: 'famous 仙气木耳边紫色小碎花短裙a字雪纺连衣裙女', price: '199.00' }, { id: 4, img: 'static/a4.jpg', title: '灰灰定制 2019春夏新款小香风粗花呢连衣裙女法式名媛复古短裙M家', price: '298.00' } ] } }, methods:{ deleteLine (index, id){ console.log(id); this.dataList.splice(index, 1) } } } </script>
注意实际应用中数据源可用异步加载,在删除的时候或许要异步请求后端来真正完成删除操作。
总结
以上所述是小编给大家介绍的使用Vue实现移动端左滑删除效果附源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
这篇关于使用Vue实现移动端左滑删除效果附源码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略