ユーザー契約のカウントダウン、onShowとonLoadの違い

ユーザー契約のカウントダウンは、ページが表示されたときに開始する必要があり、カウントダウン中はボタンが無効になります

このように、関数を個別に定義することはできません。WeChat開発者ツールのライフサイクル関数を直接使用できます-ページ表示の監視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