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

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

當前題目：微信小程序如何避免按鈕多次點擊重復觸發事件
當前鏈接：http://m.kartarina.com/news/242589.html

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

廣告

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