Cuenta regresiva del acuerdo de usuario, la diferencia entre onShow y onLoad

La cuenta regresiva del acuerdo de usuario debe comenzar cuando sale la página, el botón está deshabilitado durante la cuenta regresiva

De esta manera, no podemos definir funciones por separado, podemos usar directamente la función de ciclo de vida de las herramientas de desarrollo de WeChat: la visualización de la página del monitor en la función Show ()

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

 

Fragmento de código en wxml

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

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

Con respecto al código en wxml, como principiante, pisé un pozo, que es causado por mi incomprensión del uso de la función del ciclo de vida. Usé onShow para vincular eventos.

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

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

 El error de hacer esto es que está vinculado con el evento de clic, y la función onShow se activará nuevamente cuando se use el evento de clic.

Para conocer la diferencia entre onShow y onLoad, lectores, hagan clic en este enlace para ir al blog de este amigo ~~

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