时间：2023-01-26 09:45:27 | 栏目：vue | 点击：次
cnpm install vue-touch@next --save
在main.js中
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'}) v-touch可以是自定义名称
Vue.use注册的name名称，默认该标签为div
v-touch tag="要变成的标签名称,默认为div"
@事件类型='回调'
:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }
threshold临界值directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'hammerjs:enabled="true/false"
允许/禁止所有的手势
:enabled="{ pinch: true, rotate: false }"
允许和禁止指定手势
1、通过ref获取到该标签
2、在方法中
this.$refs.tapper.disable('tap')
公共方法
disable('手势名称') enable('手势名称') toggle('手势名称') disableAll() disable all RecognizersenableAll() enable all RecognizersisEnabled('手势名称') 在main.js中,在Vue.use之前使用
VueTouchVueTouch.registerCustomEvent('doubletap', {
type: '手势名称',
...手势事件的配置选项,见(3)
taps: 2 对应tap手势的触发点击次数配置
})
> ...</v-touch>
panpanstartpanmovepanendpancancelpanleftpanrightpanuppandownpinchpinchstartpinchmovepinchendpinchcancelpinchinpinchout presspressup rotaterotatestartrotatemoverotateendrotatecancelswipeswipeleftswiperightswipeupswipedowntap<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>