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

218 阅读 0 评论 144 点赞

我是靠谱客的博主高贵含羞草，最近开发中收集的这篇文章主要介绍vue移动端的左右滑动事件详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。