better-gesture

A gesture library use for pc, mobile, vue, and mini programs

Support multiple terminals: PC, Mobile, Vue, applet
Very small file size, no need to install any dependencies, the compressed code is only3.77KB
Good documentation support
Simple API design
Excellent performance
Rich gesture events：doubleTap longTap pressMove rotate pinch swipe ...
Support dynamic destruction, create gesture event

Install

NPM

npm install better-gesture

CDN

Able 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/better-gesture@0.2.4/lib/better-gesture.umd.min.js'></script>

Use

use in 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>

use in vue

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>

use in mini programs

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-gesture

Click on the Developer Tools menu bar: Tools -- Build NPM

Or a CDN download is introduced

click to download

// 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

Wuxiaonai/better-gesture