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 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
JS跨域问题详解
Nov 25 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
vue实现word,pdf文件的导出功能
Jul 31 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue实现抖音时间转盘
Sep 08 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
windows下apache搭建php开发环境
2015/08/27 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
200行python代码实现2048游戏
2019/07/17 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python实现简单文件读写函数
2021/02/25 Python
新东网科技Java笔试题
2012/07/13 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
小学数学教学反思
2014/02/02 职场文书
房地产推广策划方案
2014/05/19 职场文书
科学育儿宣传标语
2014/10/08 职场文书
募捐感谢信
2015/01/22 职场文书
区域经理岗位职责
2015/02/02 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS