雪花，是世界上最圣洁的花，当你静静的倾听天籁，尘世的浮躁与喧嚣，似乎都已离你远去，剩下的惟有纯净，那是心灵忘却一切的畅然，那是在没有尘埃的世界里，生命自由呼吸的平淡与安恬。
本文实例为大家分享了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移动端如何实现手指滑动效果。信者不疑人，人亦信之。自疑者不信人，人亦疑之。更多关于vue移动端如何实现手指滑动效果请关注haodaima.com其它相关文章！
