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 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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
超级简单的发送邮件程序
2006/10/09 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
PHP的自定义模板引擎
2017/03/24 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
js性能优化技巧
2015/11/29 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
微信小程序登录换取token的教程
2018/05/31 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python next()和iter()函数原理解析
2020/02/07 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
单位在职证明范本
2014/01/09 职场文书
教师求职信
2014/06/17 职场文书
优秀班集体申报材料
2014/12/25 职场文书
党员承诺书范文2015
2015/04/27 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
师范生小学见习总结
2015/06/23 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫