vue 左滑删除功能的示例代码


Posted in Javascript onJanuary 28, 2019

最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ,上代码

<template>
 <div class="slider-item">
 <div
  class="content"
  @touchstart='touchStart'
  @touchmove='touchMove'
  @touchend='touchEnd'
  :style="deleteSlider"
 >
  <div class="remove">删除</div>
 </div>
 </div>
</template>
<script>
// 获取删除按钮的宽度,此宽度为滑块左滑的最大距离
const DELBTNWIDTH = 60;
export default {
 data() {
 return {
  startX: 0, // 开始pos
  endX: 0, // 结束pos
  moveX: 0, // 滑动时的pos
  disX: 0, // 滑动距离
  deleteSlider: 'transform:translateX(0px)',
 };
 },
 methods: {
 touchStart(timestamp, ev) {
  ev = ev || event;
  this.currSliderTimestamp = timestamp;
  this.startX = 0;
  // tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕
  if (ev.touches.length === 1) {
  // 记录开始位置
  this.startX = ev.touches[0].clientX;
  console.log(this.startX, this.disX);
  }
 },
 touchMove(timestamp, ev) {
  ev = ev || event;
  if (ev.touches.length === 1) {
  // 滑动时距离浏览器左侧实时距离
  this.moveX = ev.touches[0].clientX;
  //实时滑动距离,和上一次滑动做个衔接。防止第二次触发的时候,位置不对的问题
  this.disX = this.startX - this.moveX + this.disX;
  // 如果是向右滑动或者不滑动,不改变滑块的位置
  if (this.disX > 0) {
   if (this.disX < 100) {
   this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
   } else {
   this.deleteSlider = 'transform:translateX(-100px)';
   }
  } else {
   if (this.disX < -60) {
   this.deleteSlider = 'transform:translateX(60px)';
   } else {
   this.deleteSlider = 'transform:translateX(' + Math.abs(this.disX) + 'px)';
   }
  }
  }
 },
 touchEnd() {
  //滑动完成后,滑块应该在的位置
  if (this.disX < 100) {
  this.deleteSlider = 'transform:translateX(0px)';
  this.disX = 0;
  } else {
  this.deleteSlider = 'transform:translateX(-' + DELBTNWIDTH + 'px)';
  this.disX = 60;
  }
 },
 },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.slider-item {
 width: 100%;
 height: 60px;
 border-bottom: 1px solid #eeeeee;
 overflow: hidden;
 display: flex;
 position: relative;

 .content {
 min-width: 100%;
 height: 100%;
 background: yellow;
 box-sizing: normal-box;
 padding-right: 60px;
 position: relative;
 transition-property: all;
 transition-duration: 0.4s;
 transition-timing-function: cubic-bezier(0, 0.85, 0.72, 0.86);
 transition-delay: 0s;

 .remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: #fe5ba8;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
  color: #ffffff;
 }
 }
}
</style>

参考实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
js+canvas实现画板功能
Sep 13 Javascript
详解Next.js页面渲染的优化方案
Jan 27 #Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 #Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
vue中子组件传递数据给父组件的讲解
Jan 27 #Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
You might like
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
广告显示判断
2006/08/31 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python实现滑雪者小游戏
2020/02/22 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
什么是类的返射机制
2016/02/06 面试题
Javascript如何发送一个Ajax请求
2015/01/26 面试题
机修工岗位职责
2013/11/24 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
大班亲子运动会方案
2014/06/10 职场文书
跑操口号
2014/06/12 职场文书
公司开业主持词
2015/07/02 职场文书
追悼会家属答谢词
2015/09/29 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android