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>

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