本文实例为大家分享了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>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 使用VUE递归有什么效果，如何用来做多级列表

  本文实例为大家分享了VUE递归树形实现多级列表，供大家参考，具体内容如下什么是递归?简单来说就是在组件中内使用组件本身。为什么要用递归？如果出现很多下拉菜单，同级，分级数据，层级混杂，可以使用v-for的嵌套循环不就完事了。对，没毛病这样的话也可以做，但是如果数据又多加了【很多】级分类呢；使用v-for也能实现，但是代

• JavaScript错误捕获怎样理解和使用？一文带你看懂

  这篇文章主要是介绍JavaScript错误捕获的内容，下文有介绍基本使用与逻辑、JavaScript错误捕获特性、错误对象等等内容，对大家学习和理解JavaScript错误捕获有一定的帮助，那么接下来就跟随小编来学习一下吧。

• 用JS怎样实现鼠标小尾巴的特效？

  这篇文章给大家分享用JS怎样实现鼠标小尾巴的特效的内容，实现原理其实并不困难，本文有代码供大家参考，感兴趣的朋友可以参考，接下来跟随小编一起来了解看看吧。

• 怎样用JS实现单击表格编辑修改的功能？

  今天给大家分享的是怎样用JS实现单击表格编辑修改的功能，小编觉得挺实用的，因此分享给大家做个参考，下面有实用供大家参考，接下来跟随小编一起看看吧。

• 用vue怎样实现dialog封装？方法是啥?

  今天给大家分享的是关于vue实现dialog封装的内容，小编觉得挺实用的，因此分享给大家做个参考，下文还介绍了Vue2 写法、Vue3 插件版写法和Vue3 动态组件写法等等，感兴趣的朋友就继续往下看吧。