Vue.js移动端左滑删除组件的实现代码


Posted in Javascript onSeptember 08, 2017

左滑删除在移动端很常见。下面我们一起来封装一下这个简单的小组件。我们想要是:

  • 当滑块没有超过删除按钮的一半时自动回到起点位置。
  • 滑动距离超过一半滑动到最大值(删除按钮宽度)
  • 尽量精简代码

效果如下:

Vue.js移动端左滑删除组件的实现代码

在开始之前,我们先得将 [touchEventApi][1]弄清楚了。这个小组件中,用到了:

1.  TouchEvent.touches (表示一 个 TouchList 对象,包含了所有当前接触触摸平面的触点的Touch对象)

2.  TouchEvent.changedTouches (一个 TouchList 对象,包含了代表所有从上一次触摸事件到此次事件过程中,
    状态发生了改变的触点的 Touch 对象。)

话不多说,直接上代码: 

<template>
   <div class="delete">
       <div class="slider">
          <div class="content" 
           @touchstart='touchStart'
           @touchmove='touchMove'
           @touchend='touchEnd'
           :style="deleteSlider"
          >
        <!-- 插槽中放具体项目中需要内容     -->  
          <slot></slot>
          </div>
          <div class="remove" ref='remove'>
            删除
          </div>
      </div>
    
   </div>
</template>

然后是css,这里我使用的是less

<style scoped lang="less" scoped>
  .slider{
    width: 100%;
    height:200px;
    position: relative;
     user-select: none;
    .content{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background:green;
      z-index: 100;
      //  设置过渡动画
      transition: 0.3s;
       
    }
    .remove{
      position: absolute;
      width:200px;
      height:200px;
      background:red;
      right: 0;
      top: 0;
      color:#fff;
      text-align: center;
      font-size: 40px;
      line-height: 200px;
    }
  }
 
</style>
<script type="text/ecmascript-6">
 export default {
   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)";
            // 大于0,表示左滑了,此时滑块开始滑动 
            }else if (this.disX > 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)";
            }
          }
        }   
   }
   }
</script>

到这里就全部完成了,希望对大家有帮助!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
javascript将list转换成树状结构的实例
Sep 08 #Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 #Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 #Javascript
js HTML5 canvas绘制图片的方法
Sep 08 #Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 #Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python绘制直线的方法
2018/06/30 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
Yahoo-PHP面试题2
2014/12/06 面试题
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
给校长的建议书100字
2014/05/16 职场文书
监察建议书格式
2014/05/19 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
政工师工作总结2015
2015/05/26 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android