微信小程序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組件再次隱藏。

最後

以爲文章不錯的話，給我個關注哇，點個讚唄！

若是對文章有疑問或想技術交流，可關注公衆號【GitWeb】與我一塊兒探索學習！