vue vue-touch移动端手势详解
1、安装
2、引入
3、使用
(1)替换标签
(2)定义手势
(3)配置手势事件选项
(4)阻止/触发手势
(5)公共组件方法
(6)自定义手势
4、事件类型
Pan平移
Pinch缩放
Press按压
Rotate旋转
Swipe滑动
Tap点击
代码示例
1、安装cnpm install vue-touch@next --save
2、引入
在main.js中
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'}) v-touch可以是自定义名称
3、使用
Vue.use注册的name名称，默认该标签为div
v-touch
tag="要变成的标签名称,默认为div"
(2)定义手势@事件类型='回调'
(3)配置手势事件选项:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }
threshold临界值
directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'
具体配置查看hammerjs
:enabled="true/false"
允许/禁止所有的手势
:enabled="{ pinch: true, rotate: false }"
允许和禁止指定手势
(5)公共组件方法1、通过ref获取到该标签
2、在方法中
this.$refs.tapper.disable('tap')
公共方法
disable('手势名称')
enable('手势名称')
toggle('手势名称')
disableAll() disable all Recognizers
enableAll() enable all Recognizers
isEnabled('手势名称')
在main.js中,在Vue.use之前使用
VueTouchVueTouch.registerCustomEvent('doubletap', {
type: '手势名称',
...手势事件的配置选项,见(3)
taps: 2 对应tap手势的触发点击次数配置
})
> ...</v-touch>
4、事件类型
Pan平移
pan
panstart
panmove
panend
pancancel
panleft
panright
panup
pandown
pinch
pinchstart
pinchmove
pinchend
pinchcancel
pinchin
pinchout
press
pressup
rotate
rotatestart
rotatemove
rotateend
rotatecancel
swipe
swipeleft
swiperight
swipeup
swipedown
tap
<template>
<div>
category
<!-- <div :class='{swipe:move}'>
<v-touch @swipeleft="swipeleft" style='width:200px;height:200px;backgroundColor:red;'>Swipe me!</v-touch>
左滑
</div> -->
<div >
<v-touch
v-on:panstart="swipeleft"
style='width:200px;height:200px;backgroundColor:red;'
:pan-options="{ direction: 'horizontal', threshold: 100 }"
v-bind:enabled="false"
>Swipe me!</v-touch>
左滑2
</div>
<Tabbar/>
</div>
</template>
<script>
import Tabbar from '@/components/common/tabbar/tabbar.vue'
export default {
name:'category',
data(){
return{
move:false
}
},
components:{
Tabbar
},
methods:{
swipeleft()
{
// setTimeout(()=>{
// this.$router.push('/shopcar')
// },2000)
this.move=true;
console.log('左滑');
}
}
}
</script>
<style scoped>
.swipe{
transform: translateX(-100%);
transition: 2s;
}
</style>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
