成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序 自制手勢庫

cucumber / 3105人閱讀

摘要：微信小程序手勢事件庫由于微信小程序只能夠支持時(shí)間，對(duì)于比較復(fù)雜的事件只能自己實(shí)現(xiàn)因此自己對(duì)庫進(jìn)行了改造，開發(fā)了時(shí)候微信小程序手勢事件庫使用進(jìn)行編寫手勢庫支持以下事件倉庫地址點(diǎn)我點(diǎn)我使用由于和微信小程序強(qiáng)綁定，因此需要在元素上面綁定好所有的事

WxTouchEvent 微信小程序手勢事件庫

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

touchStart

touchMove

touchEnd

touchCancel

multipointStart

multipointEnd

tap

doubleTap

longTap

singleTap

rotate

pinch

pressMove

swipe

git倉庫地址:點(diǎn)我點(diǎn)我

使用

由于和微信小程序強(qiáng)綁定，因此需要在元素上面綁定好所有的事件，書寫比較麻煩，因此建議對(duì)于原生支持的使用原生去解決，
只有當(dāng)需要 pinch，rotate,swipe 等特殊事件才使用這個(gè)事件庫實(shí)現(xiàn)

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

綁定方法

*.wxml

在wxml中對(duì)需要監(jiān)聽時(shí)間的元素綁定 touchstart、touchmove、touchend、touchcancel四個(gè)事件
頁面書寫成
*.js

在js邏輯層需要實(shí)例化WxTouchEvent, 實(shí)例中有start、move、end、cancel對(duì)應(yīng)*.wxml綁定的bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,需要將事件的回調(diào)函數(shù)一一對(duì)應(yīng),
書寫成:

import WxTouchEvent from "wx-touch-event";

let infoListTouchEvent = new WxTouchEvent();//在 Page外實(shí)例化函數(shù)，可以直接復(fù)制給 Page 中的回調(diào)函數(shù)
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),

});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82778.html

相關(guān)文章

  • 自制微信小程序通訊JS

    摘要：自制微信小程序通訊起因現(xiàn)在微信小程序開發(fā)基本會(huì)使用到組件的開發(fā)。隨著組件的不斷增加，使得組件之間的通訊越發(fā)頻繁。這個(gè)能使得我們在組件和頁面之間隨意通訊，您只需要按照規(guī)范注冊，使用即可，可以幫你建立任意兩個(gè)組件之間的通信通道。 自制微信小程序通訊JS 起因 現(xiàn)在微信小程序開發(fā)基本會(huì)使用到組件的開發(fā)。隨著組件的不斷增加，使得組件之間的通訊越發(fā)頻繁。然后，微信小程序中組件之前通訊必須通過父子...

    keke 評(píng)論0 收藏0

  • 自制，簡易仿京東微信小程序demo

    摘要：學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔，用接口中數(shù)據(jù)用分隔文件文件夾命名 學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)demo頁面，分享給大家看看 源碼地址，希望能幫助到有興趣的同學(xué)https://github.com...

    sourcenode 評(píng)論0 收藏0

  • 自制，簡易仿京東微信小程序demo

    摘要：學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔，用接口中數(shù)據(jù)用分隔文件文件夾命名 學(xué)習(xí)微信小程序一段時(shí)間，自己仿照京東小程序做了幾個(gè)demo頁面，分享給大家看看 源碼地址，希望能幫助到有興趣的同學(xué)https://github.com...

    shiweifu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<