微信小程序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

1Page({
 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組件再次隱藏。