vue vue-touch移动端手势详解
时间：2023-01-26 09:45:27|栏目：vue|点击： 次
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
(1)替换标签
tag="要变成的标签名称,默认为div"
(2)定义手势
@事件类型='回调'
(3)配置手势事件选项
:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }
threshold临界值directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'- 具体配置查看
hammerjs
(4)阻止/触发手势
:enabled="true/false"
允许/禁止所有的手势
:enabled="{ pinch: true, rotate: false }"
允许和禁止指定手势
(5)公共组件方法
1、通过ref获取到该标签
2、在方法中
this.$refs.tapper.disable('tap')
公共方法
disable('手势名称')enable('手势名称')toggle('手势名称')disableAll()disable all RecognizersenableAll()enable all RecognizersisEnabled('手势名称')
(6)自定义手势
在main.js中,在Vue.use之前使用
VueTouchVueTouch.registerCustomEvent('doubletap', {
type: '手势名称',
...手势事件的配置选项,见(3)
taps: 2 对应tap手势的触发点击次数配置
})
> ...</v-touch>
4、事件类型
Pan平移
panpanstartpanmovepanendpancancelpanleftpanrightpanuppandown
Pinch缩放
pinchpinchstartpinchmovepinchendpinchcancelpinchinpinchout
Press按压
presspressup
Rotate旋转
rotaterotatestartrotatemoverotateendrotatecancel
Swipe滑动
swipeswipeleftswiperightswipeupswipedown
Tap点击
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>
