小程序按鈕避免多次調用接口和點擊方案實現(xiàn)(不用showLoading)
更新時間：2020年04月15日 14:13:34 作者：早飯君
這篇文章主要介紹了小程序按鈕避免多次調用接口和點擊方案實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
本來是用showLoading的，點擊直接轉菊花，但是呢，showLoading和 showToast這個方法是沖突的，你轉了菊花不能彈toast提示，在某個頁面需要提交一次表單和做輸入驗證，測試說可以點擊多次
然后想到可以用一個變量判斷是否點擊了，然后500毫秒后自動回來
寫在公共的utils方法里面
// 防止多次點擊
function btnClickedFun(self) {
self.setData({
btnClicked: true
})
setTimeout(() => {
self.setData({
btnClicked: false
})
})
}
js 代碼
Page({
data: {
btnClicked: false
},
click: function (e) {
utils.btnClickedFun(this);
// 各種處理代碼
if (!form[json.departmentId]) {
utils.showToast('請選擇所屬部門')
return
}
...
// 各種處理代碼
utils.showLoading()
開始調接口
},
})
html代碼
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />
到此這篇關于小程序按鈕避免多次調用接口和點擊方案實現(xiàn)(不用showLoading)的文章就介紹到這了,更多相關小程序按鈕避免多次點擊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
BootStrap實現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實現(xiàn)帶有增刪改查功能的表格，表格封裝了3個版本，接下來通過本文給大家展示下樣式及代碼，對bootstrap增刪改查相關知識感興趣的朋友一起通過本文學習吧2016-10-10
這篇文章主要介紹了js根據(jù)鼠標移動速度背景圖片自動旋轉的方法,實例分析了javascript操作鼠標與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了擴展JS Date對象時間格式化功能，有需要的朋友可以參考一下2013-12-12
基于Bootstrap實現(xiàn)城市三級聯(lián)動
這篇文章主要為大家詳細介紹了基于BootStrap實現(xiàn)城市三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格的方法，效果十分棒,需要的朋友可以參考下2015-01-01
JavaScript知識點總結(十六)之Javascript閉包（Closure）代碼詳解
閉包是可以包含自由（未綁定）變量的代碼塊；這些變量不是在這個代碼塊或者任何全局上下文中定義的，而是在定義代碼塊的環(huán)境中定義。本文主要介紹了javascript中的閉包,感興趣的朋友一起看看吧2016-05-05
這篇文章主要介紹了微信小程序實現(xiàn)的涂鴉功能,涉及微信小程序事件響應及畫筆的相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
原生JavaScript創(chuàng)建不可變對象的方法簡單示例
這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對象的方法,結合簡單實例形式分析了基于原生JavaScript創(chuàng)建不可變對象的相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
indexOf()?方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之使用云存儲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05