vue touchmove,vue手指触摸滑动事件
这篇文章主要介绍了某视频剪辑软件中的虚拟触摸事件用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
伏型触摸事件用法虚拟触摸实现页面假左右切换效果
v-touch事件用法
1.先下载
cnpm安装vue-touch@next -保存开发
2.在主页。射流研究…引入
从“触摸”导入VueTouch
Vue.use(VueTouch，{ name: v-touch })
3.用法
v-touch v-on:swipeup= go register
img src=././assets/img/sign/登录。png alt=
/v触摸
v-touch实现页面假左右切换效果
1.安装虚拟触摸：(vue2.0之后的要使用然后分支才行，之前的使用掌握分支即可)
npm insall vue-touch@next - save
主页. js中引入，注意：这样打包后文件里的供应商。射流研究…会引入hammer.js(手势检测)
从“触摸”导入VueTouch
Vue.use(VueTouch，{
名称："虚拟触摸"
});
VueTouch.config.swipe={
门槛：10 //手指左右滑动触发事件距离
}
3.组件中使用
模板
你好
v-touch @ swipe left= swiper direction(1) @ swipe right= swiper direction(2) class= v-touch wrapper :class= trans class
菜单容器 ref=菜单容器
{{msg}}
/div
/v触摸
正在加载模态加载 span class=加载文本正在加载中./span/div
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data() {
返回{
跨类： ,
isLoading: false，
消息： 页面1
}
},
方法：{
swiper方向：函数(i) { //1向左滑2向右滑
让这个=这个
if (i==1) {
_这个。trans class=向左滑动；
}否则{
_这个。trans class=向右滑动；
}
setTimeout(function() {
_ this.isLoading=true
_这个。getinfo()；
}, 500);//因为动画时间需要0.5s
},
getInfo() {
让这个=这个
_这个。msg=
//可调接口，获取上一条/下一条数据后，再做以下操作
_this.msg=页面2;
_ this.isLoading=false//不调接口效果可能不明显
_这个。trans class=
}
}
}
/脚本
样式范围。v-touch { touch-action:pan-y！重要；//解决页面垂直滚动失效问题}。你好，包装，菜单容器，模态加载{
宽度：100%;
身高：100%;
}。包装{
填充顶部：100像素
字体大小：20px
背景色：浅珊瑚色；
颜色：# ffffff
}。模态加载{
位置：固定；
top:0；
左：0;
颜色：# ffffff
背景色：rgba(1，1，1，0.8)；
}。加载文本{
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
}。向左滑动{
过渡：全0.5s
transform:平移x(-100%)；
}。向右滑动{
过渡：全0.5s
transform:平移x(100%)；
}
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。