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

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

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

廣告

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