User agreement countdown, the difference between onShow and onLoad

The countdown of the user agreement needs to start when the page comes out, the button is disabled during the countdown

In this way, we can’t define functions separately, we can directly use the life cycle function of WeChat developer tools-monitor page display onShow() function

  data: {
    //协议按钮内容
    agreeContent: '10s 我已阅读并同意' ,
    //按钮禁用状态
    disabled: 'true'
  },  



 //协议按钮倒计时
  onShow: function () {
    let countDown = 10;
    let time = setInterval(()=>{
      --countDown;
      this.setData({
        agreeContent: `${countDown} s 我已阅读并同意`
      })
      if(countDown < 1){
        clearInterval(time);
        this.setData({
          agreeContent: this.data.agreeContent="我已阅读并同意",
          disabled: this.data.disabled==='false'
        })
      }
    },1000)
  }, 

 

Code snippet in wxml

<view>
  <!-- 协议内容  -->
  <view class="agree"></view>

  <!-- 按钮  -->
  <view class="agreeBtn" 
    bind:click="goBackLogin"
  >
    <van-button disabled="{
   
   {disabled}}" round type="info">{
   
   {agreeContent}}</van-button>
  </view>
</view>

Regarding the code in wxml, as a beginner, I stepped on a pit, which is caused by my incomprehension of the life cycle function usage. I used onShow to bind events.

  <view class="agreeBtn" 
    bind:click="goBackLogin"

   bindtap="onShow"
  >
    <van-button disabled="{ {disabled}}" round type="info">{ {agreeContent}}</van-button>
  </view>

 The mistake of doing this is that it is linked with the click event, and the onShow function will be triggered again when the click event is used.

For the difference between onShow and onLoad, readers, please click this link to move to this friend’s blog~~

https://www.cnblogs.com/senup/p/12628796.html