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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 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返回json数据函数实例
2014/10/09 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP count()函数讲解
2019/02/03 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
用python找出那些被“标记”的照片
2017/04/20 Python
mac系统安装Python3初体验
2018/01/02 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
人事专员岗位职责范本
2014/03/04 职场文书
聘任书模板
2014/03/29 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
校长新学期致辞
2015/07/30 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android