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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
关于JS中prototype的理解
Sep 07 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
微信小程序数据分析之自定义分析的实现
Aug 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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
php-fpm中max_children的配置
2019/03/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
javascript编写简易计算器
2017/05/06 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
会计系中文个人求职信
2013/12/24 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
python xlwt模块的使用解析
2021/04/13 Python
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python