网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

WxTouchEvent 微信小程序手勢事件庫

發布時間:2018-04-18 09:50 所屬欄目:小程序開發教程
作者:斑駁光影,來自授權地址

由于微信小程序只能夠支持 tap,longtap,touchstart,touchmove,touchcancel,touchend時間,對于比較復雜的事件只能自己實現
因此自己對 alloyFinger庫進行了改造,開發了時候微信小程序手勢事件庫WxTouchEvent,使用 ES
6進行編寫,手勢庫支持以下事件

  • touchStart

  • touchMove

  • touchEnd

  • touchCancel

  • multipointStart

  • multipointEnd

  • tap

  • doubleTap

  • longTap

  • singleTap

  • rotate

  • pinch

  • pressMove

  • swipe

使用

由于和微信小程序強綁定,因此需要在元素上面綁定好所有的事件,書寫比較麻煩,因此建議對于原生支持的使用原生去解決,只有當需要 pinch,rotate,swipe 等特殊事件才使用這個事件庫實現

安裝 npm i wx-touch-event --save , 或者直接從 git 庫 checkout 出來

綁定方法

*.wxml

在wxml中對需要監聽時間的元素綁定 touchstart、touchmove、touchend、touchcancel四個事件
頁面書寫成

    <view class="info-list" 
          bindtouchstart="touchStart"
          bindtouchmove="touchMove"
          bindtouchend="touchEnd"
          bindtouchcancel="touchCancel"
        >
        
    </view>

*.js

在js邏輯層需要實例化WxTouchEvent, 實例中有start、move、end、cancel對應\*.wxml綁定的bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,需要將事件的回調函數一一對應,
書寫成:

 
import WxTouchEvent from "wx-touch-event";

let infoListTouchEvent = new WxTouchEvent();//在 Page外實例化函數,可以直接復制給 Page 中的回調函數
Page({
    onLoad: function() {
        this.infoListTouchEvent = infoListTouchEvent;
        this.infoListTouchEvent.bind({//初始化后綁定事件
            swipe: function(e) {
                console.log(e);
            },
            doubleTap: function(e) {
                console.log(e);
            },
            tap: function(e) {
                console.log(e);
            }.bind(this),
            longTap: function(e) {
                console.log(e);
            },
            rotate: function(e) {
                console.log(e)
            }.bind(this),
            pinch: function(e) {
                console.log(e);
            }

        })
    },
    touchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
    touchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
    touchEnd: infoListTouchEvent.end.bind(infoListTouchEvent),
    touchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent),

});
 


易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23622.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×