2023-03-08 分類: 微信小程序
?比如頁面有一個form表單,快速重復(fù)點(diǎn)擊兩次提交按鈕,你會發(fā)現(xiàn)提交了數(shù)據(jù)兩次,這種現(xiàn)象在正常情況下不會發(fā)生,只有當(dāng)網(wǎng)絡(luò)非常不好或者手機(jī)設(shè)備實(shí)在太差的時候才會發(fā)生。當(dāng)作為一個嚴(yán)謹(jǐn)好的應(yīng)用,這種情況是不應(yīng)該發(fā)生,那么如何避免按鈕多次點(diǎn)擊重復(fù)觸發(fā)事件呢?創(chuàng)新互聯(lián)參考微信小程序開發(fā)文檔以及網(wǎng)絡(luò)搜索找到了如下幾個方法:
方法一、解決問題主要思路是當(dāng)按鈕被第一次點(diǎn)擊時,設(shè)置按鈕disabled屬性為true,從而避免被再次點(diǎn)擊。方法解決步驟如下:
1、增加頁面data參數(shù)disabled,這個參數(shù)名可自己隨意定義,設(shè)置初始值為false;
2、頁面綁定按鈕disabled屬性,具體代碼片段發(fā)布;
3、當(dāng)事件執(zhí)行開始時,加入代碼 this.setData({disabled:true}),就是設(shè)置按鈕為不可用;
4、事件執(zhí)行完畢,重新初始化按鈕disabled屬性,有兩種情況: 如果事件執(zhí)行完頁面發(fā)生跳轉(zhuǎn)如navigateTo 當(dāng)返回的時候,你會發(fā)覺按鈕不可用,這時候
需要在onShow事件加入代碼
onShow:function() {
this.setData({disabled:false})
}
如果頁面不需要跳轉(zhuǎn),直接在事件執(zhí)行完畢的時候加入this.setData({disabled:false})
這時候你會問,為什么不都在事件執(zhí)行完畢時候設(shè)置disabled為false.當(dāng)頁面發(fā)生跳轉(zhuǎn)的時候不好用,我自己測試過。
方法二、通過設(shè)置遮罩層,當(dāng)按鈕被第一次點(diǎn)擊的時候,彈出一個遮罩層遮擋按鈕被再次點(diǎn)擊,這種方法需要自己定義一個遮罩層,可通過一個data屬性來控制是否顯示,具體執(zhí)行步驟和方法一類似。
方法三、不通過遮罩層和按鈕disable屬性,直接通過變量來控制是否執(zhí)行事件,具體代碼大致如下:
1、設(shè)置參數(shù)is_first_action為true
2、事件執(zhí)行前設(shè)置is_first_action為false,然后執(zhí)行事件時判斷is_first_action是否為true,否則不執(zhí)行
3、執(zhí)行完初始化is_first_action為true
以上三種方法相同點(diǎn)都是通過data屬性來判斷是非是第一次執(zhí)行,不同點(diǎn)在于界面展示,其中第一種可能只適合按鈕,而第二種和第三種方法適合圖片或者文字觸發(fā)的事件。
還有一種特別的重復(fù)觸發(fā)情況時,當(dāng)按鈕需要定義單擊、雙擊和長按事件時,單擊、雙擊和長按是三種不同的事件,雖然小程序通過兩個事件參數(shù)執(zhí)行不同事件,但是有個BUG就是當(dāng)雙擊和長按的時候都會觸發(fā)單擊事件。如何解決這個問題可參考創(chuàng)新互聯(lián)的文章《微信小程序點(diǎn)擊事件重復(fù)觸發(fā)如何解決》
微信小程序發(fā)布一年多以來,說實(shí)話,BUG還是挺多的,不過修補(bǔ)也很積極,經(jīng)常深更半夜更新新的功能或者修復(fù)BUG,這點(diǎn)還是值得學(xué)習(xí)的。
當(dāng)前題目:微信小程序如何避免按鈕多次點(diǎn)擊重復(fù)觸發(fā)事件
當(dāng)前鏈接:http://jinyejixie.com/news/242589.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有微信小程序等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容