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