VueZingTouch
A wrapper for ZingTouch.
dependencies
setup
npm
npm install vuezingtouch
ES module
Register the directive globally.
;; Vue;
or
Register the directive in the scope of a component.
; directives: VueZingTouchname: VueZingTouch /*...*/;
browser
If Vue is detected, the directive will be registered automatically.
usage
<template> <div v-zing-touch:swipe="onSwipe" style=" align-items: center; background-color: yellow; display: flex; justify-content: center; touch-action: none; " >{{ pageIndex }}</div></template><script>export default { data: { pageIndex: 0, }, methods: { onSwipe(event) { if (event.detail[0].currentDirection === 180) { this.pageIndex++; } else if (event.detail[0].currentDirection === 360) { this.pageIndex--; } }, },};</script>
Override default options.
<!--...-->