vue移动端点击,vue手势左右滑动
这篇文章主要为大家详细介绍了某视频剪辑软件移动端实现手指滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件移动端实现手指滑动效果的具体代码，供大家参考，具体内容如下
滑动时候黄色块宽度跟着变化
通过触控点击实现
目前感觉宽度变化有点问题，还在思考中
下面上代码：
模板语言=html
div class= back ref= back @触摸开始。防止=触摸开始 @触摸移动。防止=触摸移动
div class=back-r
@触摸开始。防止=触摸开始 @触摸移动。防止=触摸移动
@touchend=touchEnd
ref=right/div
/div
/模板
脚本
导出默认值{
data() {
},
已创建(){
this.touch={}
},
方法：{
touchStart(e) {
const touch=e.touches[0]
//点击时的位子
this.touch.startX=touch.pageX
this.touch.startY=touch.pageY
console.log( -)，这个. refs.right.clientWidth)
},
//开始点击
触摸移动(e) {
控制台。log(" move ")；
const touch=e.touches[0]
//滑动位置和初始位置差
const deltaX=touch。pagex-这个。触摸。进入图形界面
console.log(deltaX)
const deltaY=touch。佩吉-这个。触摸。starty
//打印正确宽度
console.log( -)，这个refs.right.clientWidth px )
const rwidth=this .$refs.right.clientWidth
//改变正确的宽度
这个refs.right.style.width=(this .$参考文献。没错。客户端宽度数学。下限(deltaX/50)) px
//进行判断，当宽度小于0或者大于400
if (rwidth0) {
这个. refs.right.style.width=0
} else if(rwidth400){
这个. refsright . style . width=400 px
}
console.log( -)，这个refs.right.clientWidth px )
},
touchEnd() {
控制台。日志(“end”)；
//控制台。日志(这个。百分比)；
}
}
}
/脚本
样式范围的lang= stylus rel=样式表/stylus
正文{
边距：0;
填充：0;
溢出：隐藏；
触摸-动作：无；
}。后退{
宽度：100%
高度：100像素
边框10px纯色#0000FF
溢出：隐藏；
}。back-r{
//显示：内嵌块
//垂直对齐：顶部
位置：相对
宽度：400像素
高度：100%
溢出：隐藏；
背景颜色：黄色
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。