1. npm安装
npm install vue-touch@next --save
//main.js中引入:
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
2. 案例:
//html代码
<template>
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div class="menu-container" ref="menuContainer">
<!-- 这个是内容 -->
</div>
</v-touch>
</template>
3. js
export default {
name: 'Queue',
data () {
return {
}
},
methods: {
swiperleft: function () {
console.log("左划")
},
swiperright: function () {
console.log("右滑")
}
}
}
4. vue-touch在ios上无法上下移动的问题
添加一个
:swipe-options="{direction: ‘horizontal’}"
<v-touch :swipe-options="{direction: 'horizontal'}" v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
</v-touch >