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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 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脚本的10个技巧(4)
2006/10/09 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
javascript一点特殊用法
2008/05/28 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python with (as)语句实例详解
2020/02/04 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
学生就业推荐信
2013/11/13 职场文书
安全资金保障制度
2014/01/23 职场文书
银行职员自我鉴定
2014/04/20 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
助理政工师申报材料
2014/06/03 职场文书
留学生求职信
2014/06/03 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
庆元旦活动总结
2014/07/09 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
植物生产学专业求职信
2014/08/08 职场文书
计算机实训报告总结
2014/11/05 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
标枪加油稿
2015/07/22 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书