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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
两个数组去重的JS代码
Dec 04 Javascript
javascript闭包入门示例
Apr 30 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP两种实现无级递归分类的方法
2017/03/02 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
js选项卡的制作方法
2017/01/23 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python简单操作sqlite3的方法示例
2017/03/22 Python
python的turtle库使用详解
2019/05/10 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
django实现用户注册实例讲解
2019/10/30 Python
Python远程linux执行命令实现
2020/11/11 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
.net面试题
2016/09/17 面试题
机电一体化专业推荐信
2013/12/03 职场文书
2014年国培研修感言
2014/03/09 职场文书
黑白记忆观后感
2015/06/18 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android