複数のクリックが繰り返しイベントをトリガーするのを防ぐミニプログラム

ユーザーがボタンまたはコントロールをクリックすると、応答が遅い場合、ユーザーは繰り返しクリックすることがよくあります。また、ユーザーが意図的にすばやく繰り返しクリックする場合もあります。この場合、クリックイベントが複数回トリガーされ、予期しない結果が発生します。この問題を解決または回避するにはどうすればよいですか？一般に2つの状況があります。1.クリックイベントは実行リクエストです。この場合、リクエストが実行される前にモード読み込みボックスを表示できます。リクエストが完了すると、読み込みボックスが閉じます。アプレットは、基本ライブラリの1.1.0バージョンでwx.showLoadingをサポートしているため、次の操作を行う必要があります。以前のバージョンと互換性があり、コードは次のとおりです。

function showLoading(message) {
  if (wx.showLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    wx.showLoading({
      title: message, mask: true
    });
  } else { // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
    wx.showToast({
      title: message, icon: 'loading', mask: true, duration: 20000
    });
  }
}
function hideLoading() {
  if (wx.hideLoading) { // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    wx.hideLoading();
  } else {
    wx.hideToast();
  }
}

ロードボックスを表示し、ロードボックスを閉じるコードをutilなどの一般的なコードに配置し、使用時に直接呼び出すことができます。

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.クリックイベントはページジャンプです。クリックイベントがページジャンプの場合、読み込みボックスの表示には適していませんが、アプレットのページジャンプはあまり速くありません。処理されない場合、ユーザーは繰り返しクリックして複数のページを開くことになります。ここでは、ボタンやコントロールのクリック間隔を制限するメソッドを使用できます。また、このメソッドをutilなどのパブリックコードに配置して、使用時に直接呼び出すこともできます。

function buttonClicked(self) {
  self.setData({
    buttonClicked: true
  })
  setTimeout(function () {
    self.setData({
      buttonClicked: false
    })
  }, 500)
}

最初に、ページに対応するjsファイルにbuttonClickedデータオブジェクトを追加し、クリックイベントで上記のメソッドを呼び出す必要があります。

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    util.buttonClicked(this);    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
})

さらに、wxmlのクリックコントロールで、buttonClickedを使用して、クリックできるかどうかを判断します。

<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />

クリックが速すぎると上記の方法が機能せず、2つのリクエストを開始したり、同じページを複数開いたりする場合があります。
以下は、より科学的なアプローチを提供し
ます。1.データに3つの属性を定義する

touchStartTime: 0, // 触摸开始时间
touchEndTime: 0, // 触摸结束时间
lastTapTime: 0 // 最后一次单击事件点击发生时间

2.ページがこれら3つのイベントをトリガーする

<view @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd">测试重复点击事件</view>

3.メソッドに3つのメソッドを追加します

// 防止重复点击
touchStart(e) {
  this.touchStartTime = e.timeStamp;
},
touchEnd(e) {
  this.touchEndTime = e.timeStamp;
},
doubleTap(item, e) {
  var vm = this;
  // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
  if (vm.touchEndTime - vm.touchStartTime < 350) {
    // 当前点击的时间
    var currentTime = e.timeStamp;
    var lastTapTime = vm.lastTapTime;
    // 更新最后一次点击时间
    vm.lastTapTime = currentTime;
    // 如果两次点击时间在300毫秒内，则认为是双击事件
    if (currentTime - lastTapTime > 300) {
      // do something 点击事件具体执行那个业务
    }
  }
}

元のリンク：https://blog.csdn.net/qappleh/article/details/84033766

eva_feng

公開された21元の記事・ウォンの賞賛1 ・ビュー7809

プライベートの手紙の懸念

複数のクリックが繰り返しイベントをトリガーするのを防ぐミニプログラム

おすすめ