微信小程序如何避免按鈕多次點擊重復觸發(fā)事件

?比如頁面有一個form表單，快速重復點擊兩次提交按鈕，你會發(fā)現(xiàn)提交了數(shù)據(jù)兩次，這種現(xiàn)象在正常情況下不會發(fā)生，只有當網(wǎng)絡非常不好或者手機設備實在太差的時候才會發(fā)生。當作為一個嚴謹好的應用，這種情況是不應該發(fā)生，那么如何避免按鈕多次點擊重復觸發(fā)事件呢？創(chuàng)新互聯(lián)參考微信小程序開發(fā)文檔以及網(wǎng)絡搜索找到了如下幾個方法：
方法一、解決問題主要思路是當按鈕被第一次點擊時，設置按鈕disabled屬性為true，從而避免被再次點擊。方法解決步驟如下：
1、增加頁面data參數(shù)disabled，這個參數(shù)名可自己隨意定義，設置初始值為false;
2、頁面綁定按鈕disabled屬性，具體代碼片段發(fā)布;
3、當事件執(zhí)行開始時，加入代碼 this.setData({disabled:true})，就是設置按鈕為不可用；
4、事件執(zhí)行完畢，重新初始化按鈕disabled屬性，有兩種情況： 如果事件執(zhí)行完頁面發(fā)生跳轉如navigateTo 當返回的時候，你會發(fā)覺按鈕不可用，這時候
需要在onShow事件加入代碼
onShow:function() {
this.setData({disabled:false})
}
如果頁面不需要跳轉，直接在事件執(zhí)行完畢的時候加入this.setData({disabled:false})
這時候你會問，為什么不都在事件執(zhí)行完畢時候設置disabled為false.當頁面發(fā)生跳轉的時候不好用，我自己測試過。
方法二、通過設置遮罩層，當按鈕被第一次點擊的時候，彈出一個遮罩層遮擋按鈕被再次點擊，這種方法需要自己定義一個遮罩層，可通過一個data屬性來控制是否顯示，具體執(zhí)行步驟和方法一類似。
方法三、不通過遮罩層和按鈕disable屬性，直接通過變量來控制是否執(zhí)行事件，具體代碼大致如下：
1、設置參數(shù)is_first_action為true
2、事件執(zhí)行前設置is_first_action為false,然后執(zhí)行事件時判斷is_first_action是否為true,否則不執(zhí)行
3、執(zhí)行完初始化is_first_action為true
以上三種方法相同點都是通過data屬性來判斷是非是第一次執(zhí)行，不同點在于界面展示，其中第一種可能只適合按鈕，而第二種和第三種方法適合圖片或者文字觸發(fā)的事件。
還有一種特別的重復觸發(fā)情況時，當按鈕需要定義單擊、雙擊和長按事件時，單擊、雙擊和長按是三種不同的事件，雖然小程序通過兩個事件參數(shù)執(zhí)行不同事件，但是有個BUG就是當雙擊和長按的時候都會觸發(fā)單擊事件。如何解決這個問題可參考創(chuàng)新互聯(lián)的文章《微信小程序點擊事件重復觸發(fā)如何解決》
微信小程序發(fā)布一年多以來，說實話，BUG還是挺多的，不過修補也很積極，經(jīng)常深更半夜更新新的功能或者修復BUG，這點還是值得學習的。

網(wǎng)頁名稱：微信小程序如何避免按鈕多次點擊重復觸發(fā)事件
瀏覽地址：http://www.bm7419.com/news39/242589.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有微信小程序等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)