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 相关文章推荐
JS实现点击下载的小例子
Jul 10 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
javascript中 try catch用法
Aug 16 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JS变量及其作用域
Mar 29 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
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截取发动短信内容的方法
2017/07/04 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
详解vue组件基础
2018/05/04 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
Python易忽视知识点小结
2015/05/25 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python中类的属性和方法介绍
2018/11/27 Python
Python调用服务接口的实例
2019/01/03 Python
python多进程读图提取特征存npy
2019/05/21 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Django日志及中间件模块应用案例
2020/09/10 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
监理资料员岗位职责
2014/01/03 职场文书
代理班主任的自我评价
2014/02/04 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
企业指导教师评语
2014/04/28 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
学雷锋标语
2014/06/25 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis