本文实例为大家分享了Vue移动端实现手指滑动效果的具体代码,供大家参考,具体内容如下 滑动时候黄色块宽度跟着变化 通过touch点击实现 目前感觉宽度变化有点问题,还在思考中 下
本文实例为大家分享了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>
--结束END--
本文标题: vue移动端实现手指滑动效果
本文链接: https://www.lsjlt.com/news/129334.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0