用户协议倒计时，onShow 和 onLoad 的区别

用户协议的倒计时需要页面一出来时就需要它开始计时，在倒计时中按钮属于禁用状态

这样我们就不可以单独定义函数，我们可以直接使用微信开发者工具的生命周期函数--监听页面显示onShow()函数

  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)
  }, 

 

wxml 中的代码段

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

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

针对 wxml 中代码，作为初学者的我踩了一个坑，那就是对于生命周期函数用法的不理解所导致，我将 onShow 用了绑定事件

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

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

 这样做的错误就是它与点击事件串了，使用点击事件时会重新触发 onShow函数

对于 onShow 和 onLoad 的区别请读者点击此链接移驾到这位朋友的博客吧~~

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