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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
详解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
1 Tube Radio
2021/03/02 无线电
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
ThinkPHP模型详解
2015/07/27 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Python编程实现的简单神经网络算法示例
2018/01/26 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
设置python3为默认python的方法
2018/10/31 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
python第三方库学习笔记
2020/02/07 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
售房委托书
2014/08/30 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
个人党性分析材料
2014/12/19 职场文书
追悼会家属答谢词
2015/09/29 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android