頂部導航開始 -->

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

比如頁面有一個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屬性來判斷是非是第一次執行,不同點在于界面展示,其中第一種可能只適合按鈕,而第二種和第三種方法適合圖片或者文字觸發的事件。


自學php博客
請先登陸后發表評論
  • 最新評論
  • 總共0條評論
  • ? 2014-2016 zixuephp.cn 版權所有
  • ICP證:皖ICP備16012107號
  • 聯系郵箱:[email protected]
  • 交流請加微信:weibobf2899 或掃下方二維碼
双大床红利扑克1手APP