- Support multiple terminals: PC, Mobile, Vue, applet
- Very small file size, no need to install any dependencies, the compressed code is only
3.77KB - Good documentation support
- Simple API design
- Excellent performance
- Rich gesture events：doubleTap longTap pressMove rotate pinch swipe ...
- Support dynamic destruction, create gesture event
npm install better-gestureAble to pass unpkg.com/get the latest version of resources，introduce the js file on the page to start using it.
<!-- latest version of -->
<script src='https://unpkg.com/better-gesture/lib/better-gesture.umd.min.js'></script>
<!-- specify version -->
<script src='https://unpkg.com/[email protected]/lib/better-gesture.umd.min.js'></script><script src='https://unpkg.com/better-gesture/lib/better-gesture.umd.min.js'></script><div id="example"></div>
<script>
new BetterGesture(document.getElementById('example'), {
pressMove(evt) {
console.log(evt.deltaX, evt.deltaY)
},
rotate(evt) {
console.log(evt.angle)
},
pinch(evt) {
console.log(evt.zoom)
},
swipe(evt) {
console.log(evt.direction)
}
//......
})
</script>import Vue from 'vue'
import gesture from 'better-gesture'
Vue.use(gesture)<template>
<section class="example">
<div v-gesture:pressMove="pressMove" v-gesture:doubleTap="doubleTap"> </div>
</section>
</template>
<script>
export default {
methods: {
pressMove(evt) {
console.log(evt.deltaX, evt.deltaY)
},
rotate(evt) {
console.log(evt.angle)
},
pinch(evt) {
console.log(evt.zoom)
},
swipe(evt) {
console.log(evt.direction)
}
//......
}
}
</script>npm build introduction
Execute the command to install the NPM package in the directory where the small package.json program is located
npm install better-gestureClick on the Developer Tools menu bar: Tools -- Build NPM
Or a CDN download is introduced
// npm build introduction
import BetterGesture from './../miniprogram_npm/better-gesture/better-gesture.umd.min.js'
// cdn download and introduction
import BetterGesture from './../utils/better-gesture.js'Use
It is recommended to use catch to capture the event, otherwise it will easily cause the monitoring animation to freeze
<!-- wxml -->
<!-- Must initialize event touchstart,touchmove,touchend,touchcancel-->
<!-- The function name must be defined as start,move，end,cancel -->
<view class='container'>
<view
catch:touchstart="start"
catch:touchmove="move"
catch:touchend="end"
catch:touchcancel="cancel">
</view>
</view>import BetterGesture from './../utils/better-gesture.js'
Page({
onLoad() {
new BetterGesture(this, {
pressMove(evt) {
console.log(evt.deltaX, evt.deltaY)
},
rotate(evt) {
console.log(evt.angle)
},
pinch(evt) {
console.log(evt.zoom)
},
swipe(evt) {
console.log(evt.direction)
}
//......
})
}
})Mini programs code snippets: Click to view
More usage: https://wensiyuanseven.github.io/better-gesture
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent