vue移動端的左右滑動事件詳解

更新時間：2020年06月17日 15:13:58 作者：染藍(lán)了天

這篇文章主要為大家詳細(xì)介紹了vue移動端的左右滑動事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue移動端左右滑動事件，供大家參考，具體內(nèi)容如下

<!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,//結(jié)束觸摸的位置
      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類數(shù)組，等于1時表示此時有只有一只手指在觸摸屏幕
       this.startX = ev.touches[0].clientX; // 記錄開始位置
      }
     },
     touchMove:function(ev) {
      ev = ev || event;
      ev.preventDefault();
      let btnWidth = this.$refs.remove.offsetWidth; //$refs 減少獲取dom節(jié)點(diǎn)的消耗
      let btnImg = this.$refs.btnImg.offsetWidth;
      console.log(ev.targetTouches);
      console.log(ev.changedTouches);
      if(ev.touches.length == 1) {
       //滑動時距離瀏覽器左側(cè)的距離
       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>

關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: