vue移動端實現手指滑動效果的方法

本篇內容主要講解“vue移動端實現手指滑動效果的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue移動端實現手指滑動效果的方法”吧!

本文實例為大家分享了vue移動端實現手指滑動效果的具體代碼，供大家參考，具體內容如下

滑動時候黃色塊寬度跟著變化
通過touch點擊實現
目前感覺寬度變化有點問題，還在思考中

下面上代碼：

<template lang="html">
  <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove">
    <div class="back-r" 
 @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"
 @touchend="touchEnd"
 ref="right"></div>
  </div>
</template>
 
<script>
export default {
  data() {
  },
  created() {
    this.touch = {}
  },
  methods: {
    touchStart(e) {
      const touch = e.touches[0]
   
  //點擊時的位子
      this.touch.startX = touch.pageX
      this.touch.startY = touch.pageY
   console.log('----',this.$refs.right.clientWidth)
    },
//開始點擊
    touchMove(e) {
      console.log("move");
      const touch = e.touches[0]
   //滑動位置和初始位置差
      const deltaX = touch.pageX - this.touch.startX
   console.log(deltaX)
      const deltaY = touch.pageY - this.touch.startY;
      //打印right寬度
   console.log('----',this.$refs.right.clientWidth+'px') 
   const rwidth = this.$refs.right.clientWidth
   //改變right的寬度
   this.$refs.right.style.width = (this.$refs.right.clientWidth + Math.floor(deltaX/50)) +'px'
   //進行判斷，當寬度小于0或者大于400
   if (rwidth<0) {
    this.$refs.right.style.width = 0
   } else if(rwidth>400){
    this.$refs.right.style.width = 400+'px'
   } 
   console.log('----',this.$refs.right.clientWidth+'px')

    },
    touchEnd() {
      console.log("end");
      // console.log(this.percent);
    }
  }
}
</script>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
body{
  margin:0;
  padding: 0;
  overflow: hidden;
  touch-action:none;
}
.back{
 width: 100%
 height: 100px
 border 10px solid #0000FF
 overflow: hidden;
}
  
  
  .back-r{
   // display: inline-block
   // vertical-align: top
   position: relative
   width: 400px
   height: 100%
   overflow: hidden;
   background-color: yellow
  }
    
</style>

到此，相信大家對“vue移動端實現手指滑動效果的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！