大云網(wǎng) 新技術(shù)電力軟件正文

微信小程序觸控事件

2018-03-14 14:21:01 腳本之家　點(diǎn)擊量：評(píng)論 (0)

》》》什么是事件事件是視圖層到邏輯層的通訊方式。事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就

》》》什么是事件

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件對(duì)象可以攜帶額外信息，如id, dataset, touches。

事件的使用方式

在組件中綁定一個(gè)事件處理函數(shù)。

如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

在相應(yīng)的Page定義中寫(xiě)上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

可以看到log出來(lái)的信息大致如下：

事件詳解

事件分類(lèi)

事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

》》》事件分類(lèi)

touchstart 手指觸摸
touchmove 手指觸摸后移動(dòng)
touchcancel 手指觸摸動(dòng)作被打斷，如彈窗和來(lái)電提醒
touchend 手指觸摸動(dòng)作結(jié)束
tap 手指觸摸后離開(kāi)
longtap 手指觸摸后后，超過(guò)350ms離開(kāi)

》》》事件綁定

事件綁定的寫(xiě)法同組件的屬性，以 key、value 的形式。

key 以bind或catch開(kāi)頭，然后跟上事件的類(lèi)型，如bindtap, catchtouchstart
value 是一個(gè)字符串，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。 bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

上面簡(jiǎn)單介紹了小程序事件基礎(chǔ)，是時(shí)候彰顯"事件"的威力：

單擊(tap)
雙擊(dbtap)
長(zhǎng)按(longtap)
滑動(dòng)
多點(diǎn)觸控

1.單擊

單擊事件由touchstart、touchend組成,touchend后觸發(fā)tap事件。

 
[html] view plain copy 
<view>  
 <button type="primary"bindtouchstart="mytouchstart"bindtouchend="mytouchend"bindtap="mytap">點(diǎn)我吧</button>  
</view>  
mytouchstart: function(e){ console.log(e.timeStamp +'- touch start')  
},mytouchend: function(e){ console.log(e.timeStamp +'- touch end')  
},mytap: function(e){ console.log(e.timeStamp +'- tap')  
}  

2.雙擊

雙擊事件由兩個(gè)單擊事件組成，兩次間隔時(shí)間小于300ms認(rèn)為是雙擊；微信官方文檔沒(méi)有雙擊事件，需要開(kāi)發(fā)者自己定義處理。

[html] view plain copy 
<view>  
 <buttontypebuttontype="primary"bindtap="mytap">點(diǎn)我吧</button>  
</view>  

3.長(zhǎng)按

長(zhǎng)按事件手指觸摸后，超過(guò)350ms再離開(kāi)。

[html] view plain copy 
<view>  
 <button type="primary"bindtouchstart="mytouchstart"bindlongtap="mylongtap"  
 bindtouchend="mytouchend"bindtap="mytap">點(diǎn)我吧</button>  
</view>  
mytouchstart: function(e){ console.log(e.timeStamp +'- touch start')  
},//長(zhǎng)按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')  
 },mytouchend:function(e){ console.log(e.timeStamp +'- touch end')  
},mytap: function(e){ console.log(e.timeStamp +'- tap')  
}  

單擊、雙擊、長(zhǎng)按屬于點(diǎn)觸事件，會(huì)觸發(fā)touchstart、touchend、tap事件，touchcancel事件只能在真機(jī)模擬，不多說(shuō)了。

事件	觸發(fā)順序
單擊	touchstart → touchend → tap
雙擊	touchstart → touchend → tap → touchstart → touchend → tap
長(zhǎng)按	touchstart → longtap → touchend → tap

4.滑動(dòng)

手指觸摸屏幕并移動(dòng)，為了簡(jiǎn)化起見(jiàn)，下面以水平滑動(dòng)和垂直滑動(dòng)為例。滑動(dòng)事件由touchstart、touchmove、touchend組成

坐標(biāo)圖：

以屏幕左上角為原點(diǎn)建立直角坐標(biāo)系。第四象限為手機(jī)屏幕，Y軸越往下坐標(biāo)值越大（注意跟數(shù)學(xué)象限的區(qū)別）。
假設(shè)A點(diǎn)為touchstart事件觸摸點(diǎn)，坐標(biāo)為A(ax,ay)，然后手指向上滑動(dòng)到點(diǎn)B(bx,by)，就滿足條件by < ay;
同理，向右滑動(dòng)到C(cx,cy),滿足cx > ax；向下滑動(dòng)到D(dx,dy),滿足dy > ay；向左移動(dòng)到E(ex，ey)滿足ex < ax.
計(jì)算線段AB在Y軸上投影長(zhǎng)度為m,在X軸上的投影長(zhǎng)度為n
計(jì)算r = m/n,如果r > 1,視為向上滑動(dòng)。
同理計(jì)算線段AC,AD,AE在Y軸投影長(zhǎng)度與X軸的投影長(zhǎng)度之比，得出向右向下向左的滑動(dòng)。

以上沒(méi)考慮r為1的情況。

[html] view plain copy 
<view>  
 <buttontypebuttontype="primary"bindtouchstart="mytouchstart"bindtouchmove="mytouchmove">點(diǎn)我吧</button>  
</view>  

[html] view plain copy 
mytouchstart: function (e) {  
    var that = this;  
    //開(kāi)始觸摸，獲取觸摸坐標(biāo)  
    console.log(e)  
    that.setData({ startpoint: [e.touches[0].pageX, e.touches[0].pageY] });  
},  
//觸摸點(diǎn)移動(dòng)  
mytouchmove: function (e) {  
    //當(dāng)前觸摸點(diǎn)坐標(biāo)  
    var that = this;  
    var curPoint = [e.touches[0].pageX, e.touches[0].pageY];  
    var startpoint = that.data.startpoint;  
    console.log(startpoint)  
    console.log(curPoint)  
    //比較pagex值  
    if (curPoint[0] < startpoint[0]) {  
        if (Math.abs(curPoint[0] - startpoint[0]) >= Math.abs(curPoint[1] - startpoint[1])) {  
            console.log(e.timestamp + '-touch left move')  
            that.setData({  
                dellStyle: "dellList"  
            })  
        } else {  
            if (curPoint[1] >= startpoint[1]) {  
                console.log(e.timestamp + '-touch down move')  
            } else {  
                console.log(e.timestamp + '-touch up move')  
            }  
        }  
    } else {  
        if (Math.abs(curPoint[0] - startpoint[0] >= Math.abs(curPoint[1] - startpoint[1]))) {  
            console.log(e.timestamp + '-touch right move')  
            that.setData({  
                dellStyle: "modList"  
            })  
        } else {  
            if (curPoint[1] >= startpoint[1]) {  
                console.log(e.timestamp + '-touch down move')  
            } else {  
                console.log(e.timestamp + '-touch up move')  
            }  
        }  
    }  
},  

5.多點(diǎn)觸控

由于模擬器尚不支持多點(diǎn)觸控，內(nèi)測(cè)開(kāi)放后，繼續(xù)補(bǔ)充。

實(shí)際使用中遇到的坑;

本身使用的是 scroll-view 進(jìn)行下拉刷新事件，想在頁(yè)面list里面進(jìn)行左滑動(dòng)喚醒刪除菜單，實(shí)際上寫(xiě)出來(lái)會(huì)沖突導(dǎo)致 scroll事件無(wú)法觸發(fā)，默認(rèn)滑動(dòng)事件了。

長(zhǎng)按：touchstart → longtap → touchend → tap

本身list綁定了單擊事件點(diǎn)擊進(jìn)入詳情頁(yè)，準(zhǔn)備增加一個(gè)長(zhǎng)按喚醒操作菜單，實(shí)際體驗(yàn)并不好，長(zhǎng)按之后手指不能直接離開(kāi)屏幕那樣會(huì)觸發(fā)點(diǎn)擊事件，需要輕微移動(dòng)一下離開(kāi)屏幕。

解決思路

前端綁定三個(gè)事件

[html] view plain copy 
bindtouchstart="mytouchstart" bindtouchend="mytouchend"  bindtap="bindtap"  

js處理通過(guò)點(diǎn)擊開(kāi)始結(jié)束判斷點(diǎn)擊屏幕時(shí)間，進(jìn)行不同的業(yè)務(wù)觸發(fā)

[html] view plain copy 
bindtap: function (e) {  
    var that = this;  
    //觸摸時(shí)間距離頁(yè)面打開(kāi)的毫秒數(shù)    
    var touchTime = that.data.touch_end - that.data.touch_start  
    console.log(touchTime)  
    //如果按下時(shí)間大于350為長(zhǎng)按    
    if (touchTime > 350) {  
        wx.showModal({  
            title: '提示',  
            content: '這是一個(gè)模態(tài)彈窗',  
            success: function (res) {  
                if (res.confirm) {  
                    console.log('用戶點(diǎn)擊確定')  
                } else if (res.cancel) {  
                    console.log('用戶點(diǎn)擊取消')  
                }  
            }  
        })  
    } else {  
        var id = e.currentTarget.dataset.id;  
        wx.navigateTo({  
            url: '../detail/detail?id=' + id  
        })  
    }  
},  
//按下事件開(kāi)始    
mytouchstart: function (e) {  
    let that = this;  
    that.setData({  
        touch_start: e.timeStamp  
    })  
    console.log(e.timeStamp + '- touch-start')  
},  
//按下事件結(jié)束    
mytouchend: function (e) {  
    let that = this;  
    that.setData({  
        touch_end: e.timeStamp  
    })  
    console.log(e.timeStamp + '- touch-end')  
},  
 

責(zé)任編輯：售電衡衡

免責(zé)聲明：本文僅代表作者個(gè)人觀點(diǎn)，與本站無(wú)關(guān)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，請(qǐng)讀者僅作參考，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。

我要收藏

個(gè)贊