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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php实现读取内存顺序号
2015/03/29 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python binascii 进制转换实例
2019/06/12 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
XML文档面试题
2015/08/05 面试题
医学院毕业生自荐信
2013/11/08 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
五一服装活动方案
2014/01/11 职场文书
个人简历自我评价
2014/02/02 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
前处理班长职位说明书
2014/03/01 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
教学改革实施方案
2014/03/31 职场文书
企业消防安全责任书
2014/07/23 职场文书
房产分割协议书范文
2014/11/21 职场文书