vue移动端的左右滑动事件详解


Posted in Javascript onJune 17, 2020

本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://unpkg.com/vue"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta content="telephone=no" name="format-detection">
  <style>
   *{padding: 0;margin: 0;}
   body {background: #EEEEEE;}
   .box {text-align: center;}
   .btn {
    position: relative;
    width: 70%;
    height: 40px;
    margin: 150px auto;
    border-radius: 20px;
    background: #333333;
   }
   .btn-move {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #ededed;
   }
   .tt {
    font-size: 20px;
    color: #008000;
    text-align: center;
    margin-top: 50px;
   }
  </style>
 </head>
 <body>
  <div id="box">
   <slide-release></slide-release>
  </div>
 
  <script type="text/x-template" id="slide">
   <div>
    <div class="btn" ref='remove'>
     <span ref='btnImg' class="btn-move" 
      @touchstart='touchStart' 
      @touchmove='touchMove' 
      @touchend='touchEnd' 
      :style="slideEffect"
      >
     </span>
    </div>
    <p class="tt" v-show="isShow">你滑动成功了!</p>
   </div>
 
 
  </script>
  <script>
   Vue.component('slide-release',{
    template:'#slide',
    data:function(){
     return {
      isShow:false,
      startX:0,//开始触摸的位置
      moveX:0,//滑动时的位置
      endX:0,//结束触摸的位置
      disX:0,//移动距离
      slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider"
 
     }
    },
    methods:{
     touchStart:function(ev) {
      ev = ev || event;
      ev.preventDefault();
//      console.log(ev.targetTouches);
//      console.log(ev.changedTouches);
      if(ev.touches.length == 1) { //tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕
       this.startX = ev.touches[0].clientX; // 记录开始位置
      }
     },
     touchMove:function(ev) {
      ev = ev || event;
      ev.preventDefault();
      let btnWidth = this.$refs.remove.offsetWidth; //$refs 减少获取dom节点的消耗
      let btnImg = this.$refs.btnImg.offsetWidth;
      console.log(ev.targetTouches);
      console.log(ev.changedTouches);
      if(ev.touches.length == 1) {
       //滑动时距离浏览器左侧的距离
       this.moveX = ev.touches[0].clientX;
 
       //实时的滑动的距离-起始位置=实时移动的位置
       this.disX = this.moveX-this.startX;
       if(this.disX<0 || this.disX == 0) {
        this.slideEffect = 'transform:translateX(0px)';
       }else if(this.disX>0){
        this.slideEffect = 'transform:translateX('+this.disX+'px)';
 
        // 最大也只能等于删除按钮宽度 
        if(this.disX>=btnWidth) {
         this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)';
        }
       }
      }
     },
     touchEnd:function(ev){
      ev = ev || event;
      ev.preventDefault();
      let btnWidth = this.$refs.remove.offsetWidth;
      let btnImg = this.$refs.btnImg.offsetWidth;
//      console.log(ev.changedTouches);
      if(ev.changedTouches.length == 1) {
       let endX = ev.changedTouches[0].clientX;
       this.disX = endX-this.startX;
       console.log(this.disX,'this.disX')
       console.log((btnWidth/2),'btnWidth/2');
       if(this.disX < (btnWidth/2)) {
        this.slideEffect = 'transform:translateX(0px)';
       }else {
        this.slideEffect = "transform:translateX("+(btnWidth-btnImg)+ "px)";
        //让字段显示出来,或者写你需要的逻辑
        this.isShow = true
       }
      }
     }
    }
   })
   var vm = new Vue({
    el:'#box',
   })
  </script>
 </body>
</html>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 #Javascript
vue-iview动态新增和删除的方法
Jun 17 #Javascript
vue iview实现动态新增和删除
Jun 17 #Javascript
vue如何搭建多页面多系统应用
Jun 17 #Javascript
vue2.0实现列表数据增加和删除
Jun 17 #Javascript
使用next.js开发网址缩短服务的方法
Jun 17 #Javascript
vue实现前端分页完整代码
Jun 17 #Javascript
You might like
用PHP调用数据库的存贮过程
2006/10/09 PHP
一个改进的UBB类
2006/10/09 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python自动格式化json文件的方法
2015/03/11 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python实现ping指定IP的示例
2018/06/04 Python
django_orm查询性能优化方法
2018/08/20 Python
Python命令行click参数用法解析
2019/12/19 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
农村婚庆司仪主持词
2014/03/15 职场文书
植树造林的宣传标语
2014/06/23 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers