(小程序篇)16.点击按钮设置开关

说明：用户点击按钮进行下单操作时，在这期间按钮都是不能进行下单操作，否则会造成重复订单生成等情况，这时候我们就需要给按钮加个开关。
PS:结合lin-ui

1.定义开关变量

.js 中

page({
	...
	data:{
    	canClick: true,  // 默认是可以点击
    }
    ...
})

2.根据开关变量定义页面模板

.wxml 中

<l-button 
  bind:lintap="enterPay" 
  loading="{{!canClick}}" 
  disabled="{{!canClick}}"
>{{canClick?'点击支付':'支付中'}}</l-button>

3.利用定时器模拟点击之后进行支付等待

PS：这里设置的是等两秒完成支付操作
.js

page({
	data:{
    	canClick: true
    },
    ...
    enterPay(){
      // 不能进行支付
      if(!this.data.canClick) return;
      this.setData({
        canClick: false
      });
      // 定时器模拟支付
      setTimeout(()=>{
        this.setData({
          canClick: true
        });
      }, 2000)
    }
    ...

})

4.效果展示

• 可点击状态

• 点击等待完成状态