技術標籤：微信小程式javascript

使用者協議的倒計時需要頁面一出來時就需要它開始計時，在倒計時中按鈕屬於禁用狀態

這樣我們就不可以單獨定義函式，我們可以直接使用微信開發者工具的生命週期函式--監聽頁面顯示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