better-gesture

English | 中文 | Demo | Link

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/[email protected]/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