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>

来源：https://blog.csdn.net/qq_40322724/article/details/105537430