애플 릿 이 여러 번 의 클릭 을 피하 고 이벤트 가 반복 되 는 것 을 자세히 설명 합 니 다.

전단 개발 로 서 저 희 는 자주 만 나 는 장면 입 니 다.예 를 들 어 사용자 가 인증 코드 획득 단 추 를 눌 렀 을 때 반응 이 없고 대부분 사용자 가 계속 클릭 하면 사용자 가 여러 개의 인증 코드 를 받 을 수 있 습 니 다.이것 은 배경 api 요청 이 느 리 고 클 라 이언 트 체험 이 제대로 되 지 못 해서 사용자 가 클릭 하지 않 았 거나 페이지 가 가짜 로 죽 었 다 고 생각 하기 때 문 입 니 다.지난번 요청 이 끝나 기도 전에 다시 단 추 를 누 르 세 요.이것 은 우리 개발 에 있어 서 이것 은 bug 이다.
어떻게 이 문 제 를 해결 하거나 피 합 니까?일반적으로 두 가지 상황 이 있다.
1.이 벤트 를 클릭 하면 네트워크 요청(댓 글 제출,인증 코드,결제)을 수행 합 니 다.
이 경우 요청 이 실행 되 기 전에 모드 의 로드 상 자 를 표시 하고 요청 이 완료 되면 로드 상 자 를 닫 을 수 있 습 니 다.
애플 릿 은 1.1.0 버 전 기본 라 이브 러 리 에서 만 wx.show Loading 을 지원 하기 때문에 낮은 버 전 을 호 환 처리 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

 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 를 통 해 클릭 할 수 있 는 지 여 부 를 판단 할 수 있 으 며,bindtap 로 도 disabled 를 사용 할 수 있 습 니 다.

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

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.