微信小程序toast組件中bindchange事件觸發條件

微信小程序toast組件是一種消息提示框。例如當文章條數所有加載出來後，用戶再次點擊加載更多的時候，js判斷文章條數所有加載出來後，便讓toast組件彈出提示用戶「沒有更多文章了」，效果以下圖所示：

代碼實現

index.wxml

1 //點擊加載更多，執行js裏的loadMore函數  
2 <view bindtap="loadMore">加載更多</view>  
3  
4 //hidden接收js傳遞過來的toastHidden變量值，爲true，toast隱藏；爲false，toast顯示  
5 <toast hidden="{{toastHidden}}" bindchange="toastChange">沒有更多文章了</toast>

文件路徑：pages/index/index.wxml

index.js

1 Page({  
2   data: {  
3   //定義toastHidden變量，並將初始值設爲true，此時toast組件隱藏  
4    toastHidden: true,  
5   },  
6  
7  //點擊加載更多時執行的函數  
8    loadMore: function () {  
9      var that = this  
10     if (「數據條數所有加載出來後」) {  
11      //if條件成立的話，將toastHidden的值設爲false，此時toast組件顯示  
12      that.setData({ toastHidden: false })  
13     }  
14   },  
15  
16  //這個函數將toastHidden值再次設爲true，此時toast組件再次隱藏  
17   toastChange: function () {  
18     this.setData({ toastHidden: true })  
19   }  
20 })

文件路徑：pages/index/index.js

toastchange函數在哪裏被執行了？

在上面的動態效果圖中，能夠看到，當文章條數所有加載出來後，toast組件彈出提示，且幾秒後又消失。js中toastchange函數就是讓toast組件再次消失。可是代碼中並沒看到toastchange函數在哪被調用。這就得先了解下toast組件的文檔說明。

從文檔中得知bindchange事件觸發條件須要hidden的值爲false。toastchange函數綁定在bindchange事件上，所以toastchange函數在hidden的值爲false的時候執行。這裏回看js中hidden的值設爲false的地方。

代碼分析

Step1：toast組件接收js傳遞過來的toastHidden初始值（true），此時toast隱藏。

Step2：js程序判斷文章條數所有加載出來後，將toastHidden值設爲false，此時toast顯示。

Step3：hidden接到false的時候觸發bindchange事件並執行coastchange函數（coastchange執行前會有一個延時（duration），默認1500毫秒），函數中將toastHidden的值設置爲true，此時toast組件再次隱藏。