作為前端開發(fā)，我們經(jīng)常會(huì)遇到的場景，比如用戶點(diǎn)擊獲取驗(yàn)證碼按鈕時(shí)，沒有反應(yīng)，大部分用戶都會(huì)接著點(diǎn)擊，這就會(huì)造成用戶收到多條驗(yàn)證碼，這是因?yàn)楹笈_(tái)api請(qǐng)求比較慢，而客戶端體驗(yàn)又做得不到位，導(dǎo)致用戶以為沒點(diǎn)擊到或者是頁面假死，在上次請(qǐng)求還沒處理完，就再次點(diǎn)擊按鈕。這對(duì)于我們開發(fā)來說，這是bug。
如何解決或避免這個(gè)問題呢？一般來說有兩種情況。
1、點(diǎn)擊事件是執(zhí)行網(wǎng)絡(luò)請(qǐng)求（提交評(píng)論，驗(yàn)證碼，支付）
這種情況下可以在請(qǐng)求執(zhí)行之前顯示一個(gè)模式的加載框，請(qǐng)求完成后再關(guān)閉加載框。
由于小程序在1.1.0版本基礎(chǔ)庫才支持wx.showLoading，因此需要對(duì)低版本做兼容處理，代碼如下：
function showLoading(message) { if (wx.showLoading) { // 基礎(chǔ)庫 1.1.0 微信6.5.6版本開始支持，低版本需做兼容處理 wx.showLoading({ title: message, mask: true }); } else { // 低版本采用Toast兼容處理并將時(shí)間設(shè)為20秒以免自動(dòng)消失 wx.showToast({ title: message, icon: 'loading', mask: true, duration: 20000 }); }} function hideLoading() { if (wx.hideLoading) { // 基礎(chǔ)庫 1.1.0 微信6.5.6版本開始支持，低版本需做兼容處理 wx.hideLoading(); } else { wx.hideToast(); }}我們可以將顯示加載框和關(guān)閉加載框的代碼放在公共的代碼里面比如util，然后在使用時(shí)直接調(diào)用即可。
function request() { util.showLoading('加載中...'); wx.request({ url: app.globalData.host + 'xxx', data: {...}, method: 'GET', success: function (res) { util.hideLoading() ... }, fail: function (res) { util.hideLoading() ... } })}2、點(diǎn)擊事件是頁面跳轉(zhuǎn)
當(dāng)點(diǎn)擊事件需要頁面跳轉(zhuǎn)時(shí)，不太適合顯示加載框，但小程序的頁面跳轉(zhuǎn)并不是很快，如果不作處理又會(huì)導(dǎo)致用戶反復(fù)點(diǎn)擊打開多個(gè)頁面，這里可以使用限制按鈕或控件的點(diǎn)擊間隔的方式處理，同樣可以將這個(gè)方法放到公共的代碼里面比如util，然后在使用時(shí)直接調(diào)用即可。
function buttonClicked(self) { self.setData({ buttonClicked: true }) setTimeout(function () { self.setData({ buttonClicked: false }) }, 500)}首先需要在頁面對(duì)應(yīng)的js文件里面增加一個(gè)buttonClicked數(shù)據(jù)對(duì)象，然后在點(diǎn)擊事件里面調(diào)用上述方法。
Page({ data: { buttonClicked: false }, click: function (e) { util.buttonClicked(this); var id = e.currentTarget.dataset.id; wx.navigateTo({ url: '../detail/detail?id=' + id }) },})另外，在wxml的點(diǎn)擊控件中通過buttonClicked判斷是否可以點(diǎn)擊，可以用bindtap也可以用disabled
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" /><button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" /><button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
