html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景。我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象。
点击下载源码
今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤。
准备
安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM
我们使用安装一个webpack模板:
vue init webpack test
组件
我们创建一个左滑删除组件,在src/components目录下创建文件:deleteTemplate.vue,然后编写模板代码:
删除
我们这个模板是一个要左滑删除的列表项,绑定了手势滑动触控动作响应,在其中加入了图片、商品名称和价格等内容,以及一个删除按钮。
接下来,我们看组件中的js部分:
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');
}
}
}
我们在代码中主要用到三个移动端触控事件:
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}}
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)
}
}
}
注意实际应用中数据源可用异步加载,在删除的时候或许要异步请求后端来真正完成删除操作。
总结
以上所述是小编给大家介绍的使用Vue实现移动端左滑删除效果附源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码相关推荐
- 微信删除了怎么恢复聊天记录?左滑删除的聊天记录可以这样找回
听到手滑二字,是否会想到很多明星不小心点赞了哪条微博,就会澄清说手滑了,而网民就会嘲笑,怎么可能会手滑,是故意的吧!确实,没试过手滑是不知道真的会!特别是现在的手机几乎都是全触屏模式,会手滑也不见怪, ...
- html消息页左滑删除模板,基于JS实现移动端左滑删除功能
基于JS实现移动端左滑删除功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现移动端左滑删除功能,编程之家小编觉得挺不错的,现 ...
- 微信公众平台开发教程(四) 实例入门:机器人(附源码)
微信公众平台开发教程(四) 实例入门:机器人(附源码) 上一篇文章,写了基本框架,可能很多人会觉得晕头转向,这里提供一个简单的例子来予以说明,希望能帮你解开谜团. 一.功能介绍 通过微信公众平台实现在 ...
- java计算机毕业设计vue开发一个简单音乐播放器(附源码、数据库)
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
- Vue 彩色头像|一个有趣的头像生成器 附源码
前言 这是一款矢量风格的头像生成器,您可以搭配不同的素材组件,生成属于您自己的个性化头像. 介绍 您可能感兴趣的功能: 可视化组件配置栏 随机生成头像 重做/撤消 国际化 批量生成多个头像 在线体验 ...
- java计算机毕业设计vue健康餐饮管理系统设计与实现(附源码、数据库)
java计算机毕业设计vue健康餐饮管理系统设计与实现(附源码.数据库) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
- 微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言: 现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程. 效果图: 实现效果: 当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删 ...
- 微信小程序倒计时,购物车,向左滑删除 左拉删除
微信小程序倒计时 :https://gitee.com/dotton/CountDown 微信小程序购物车功能,全选,价格叠加:https://www.cnblogs.com/linxin/p/683 ...
- iOS新特性框架、仿微信图片浏览、视频监控、爱心动画、文字适配等源码
iOS精选源码 iOS一个看电影.电视剧集合 HDCinema 一个非常简易的新特性集成框架NewFeatures 全自动化的文字适配 仿微信朋友圈图片浏览器 iOS你的爱心❤️动画源码 一个类似系统 ...
最新文章
- Oozie和Azkaban的技术选型和对比
- cisco SMD 配置安装
- CPU 到底是怎么认识代码的?涨姿势了!
- libsvm中tools(easy.py,subset.py,grid.py,checkdata.py)的使用
- 后缀自动机(SAM)构造实现过程演示+习题集锦
- matlab 传输速率,处理速率转换
- MATLAB Simulink
- MathWorks 中国
- matlab求解helmholtz,MATLAB与科学计算(第2版)
- 设计模式笔记十四:责任链模式
- 软件安装管家matlab教程,timesat软件怎么安装 timesat安装使用图文教程 - 驱动管家...
- 【T3】批次参照结存数量为0的也显示
- 【自动驾驶感知领域目前研究热点】
- Java创建一个简单的图书管理系统
- 自己组装高档游戏型计算机表格,推荐高端笔记本配置表和完整的高配置计算机物理检查...
- 小米昨天发布的新机,简直太TM牛了……
- uniapp设置的组件样式在H5和APP中生效,在微信小程序中不生效问题解决
- 寒冬之时,滚烫的社区团购与桎梏中的盒马、永辉
- MAC OS X10 10上Android开发环境搭建
- 本题要求实现一个函数,将非负整数n转换为二进制后输出。
- R语言包ggplot2绘制多组箱线图
- 重刷leedcode(1-10)