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 相关文章推荐
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
Boostrap入门准备之border box
May 09 Javascript
几行js代码实现自适应
Feb 24 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
Vue中的字符串模板的使用
May 17 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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实现变色验证码实例
2014/01/06 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
ES6的新特性概览
2016/03/10 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
详解django.contirb.auth-认证
2018/07/16 Python
python生成lmdb格式的文件实例
2018/11/08 Python
numpy基础教程之np.linalg
2019/02/12 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Django和Flask框架优缺点对比
2019/10/24 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
初三化学教学反思
2014/01/23 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
新党章的学习心得体会
2014/11/07 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
实习科室评语
2015/01/04 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript