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

微信小程序觸控事件

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

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

》》》什么是事件

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

事件的使用方式

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

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

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

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

可以看到log出來的信息大致如下：

事件詳解

事件分類

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

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

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

》》》事件分類

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

》》》事件綁定

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

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

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

單擊(tap)
雙擊(dbtap)
長按(longtap)
滑動
多點(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.雙擊

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

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

3.長按

長按事件手指觸摸后，超過350ms再離開。

[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')  
},//長按事件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')  
}  

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

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

4.滑動

手指觸摸屏幕并移動，為了簡化起見，下面以水平滑動和垂直滑動為例。滑動事件由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)，然后手指向上滑動到點(diǎn)B(bx,by)，就滿足條件by < ay;
同理，向右滑動到C(cx,cy),滿足cx > ax；向下滑動到D(dx,dy),滿足dy > ay；向左移動到E(ex，ey)滿足ex < ax.
計(jì)算線段AB在Y軸上投影長度為m,在X軸上的投影長度為n
計(jì)算r = m/n,如果r > 1,視為向上滑動。
同理計(jì)算線段AC,AD,AE在Y軸投影長度與X軸的投影長度之比，得出向右向下向左的滑動。

以上沒考慮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;  
    //開始觸摸，獲取觸摸坐標(biāo)  
    console.log(e)  
    that.setData({ startpoint: [e.touches[0].pageX, e.touches[0].pageY] });  
},  
//觸摸點(diǎn)移動  
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)測開放后，繼續(xù)補(bǔ)充。

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

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

長按：touchstart → longtap → touchend → tap

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

解決思路

前端綁定三個事件

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

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

[html] view plain copy 
bindtap: function (e) {  
    var that = this;  
    //觸摸時間距離頁面打開的毫秒數(shù)    
    var touchTime = that.data.touch_end - that.data.touch_start  
    console.log(touchTime)  
    //如果按下時間大于350為長按    
    if (touchTime > 350) {  
        wx.showModal({  
            title: '提示',  
            content: '這是一個模態(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  
        })  
    }  
},  
//按下事件開始    
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é)聲明：本文僅代表作者個人觀點(diǎn)，與本站無關(guān)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時性本站不作任何保證或承諾，請讀者僅作參考，并請自行核實(shí)相關(guān)內(nèi)容。

我要收藏

個贊