在移动端vue网页监听的滑动事件。上滑,下滑,左滑等等


做一个展示类的活动页面,需要监听用户滑动事件触发不同效果。一般来说,这种效果都是通过监听touchstart 和 touchend 时手指的坐标来实现的。这样常见的行为一定是有成熟的库的,本着不重复遭轮子的原理。我们用到了 kim-vue-touch 这个库
# npm i kim-vue-touch
在main.js 中
import vueTouch from 'kim-vue-touch'

Vue.use(vueTouch)
在html中,通过将事件处理函数写入倒 v-swipeup 绑定的方法里即可
<div v-swipeup="(e)=>{driver({deltaY: 1})}" v-swipedown="(e)=>{driver({})}">
</div>
附上插件的其他参数:
v-tap 点击
v-longtap 长按
v-swipeleft 左滑
v-swiperight 右滑
v-swipeup 上滑
v-swipedown 下滑
tips

参考链接