vue移动端实现手指滑动效果

最新推荐文章于 2024-06-19 16:12:14 发布

qq_40322724

最新推荐文章于 2024-06-19 16:12:14 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40322724/article/details/105537430

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>