微信小程序toast組件是一種消息提示框。例如當(dāng)文章條數(shù)全部加載出來后，用戶再次點(diǎn)擊加載更多的時(shí)候，js判斷文章條數(shù)全部加載出來后，便讓toast組件彈出提示用戶“沒有更多文章了”，效果如下圖所示：
代碼實(shí)現(xiàn)
index.wxml
1//點(diǎn)擊加載更多，執(zhí)行js里的loadMore函數(shù)
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變量，并將初始值設(shè)為true，此時(shí)toast組件隱藏
4 toastHidden: true,
5 },
6
7 //點(diǎn)擊加載更多時(shí)執(zhí)行的函數(shù)
8 loadMore: function () {
9 var that = this
10 if (“數(shù)據(jù)條數(shù)全部加載出來后”) {
11 //if條件成立的話，將toastHidden的值設(shè)為false，此時(shí)toast組件顯示
12 that.setData({ toastHidden: false })
13 }
14 },
15
16 //這個(gè)函數(shù)將toastHidden值再次設(shè)為true，此時(shí)toast組件再次隱藏
17 toastChange: function () {
18 this.setData({ toastHidden: true })
19 }
20})
文件路徑：pages/index/index.js
toastchange函數(shù)在哪里被執(zhí)行了？
在上面的動(dòng)態(tài)效果圖中，可以看到，當(dāng)文章條數(shù)全部加載出來后，toast組件彈出提示，且?guī)酌牒笥窒?。js中toastchange函數(shù)就是讓toast組件再次消失。但是代碼中并沒看到toastchange函數(shù)在哪被調(diào)用。這就得先了解下toast組件的文檔說明。
從文檔中得知bindchange事件觸發(fā)條件需要hidden的值為false。toastchange函數(shù)綁定在bindchange事件上，因此toastchange函數(shù)在hidden的值為false的時(shí)候執(zhí)行。這里回看js中hidden的值設(shè)為false的地方。
紅色框里的代碼就是關(guān)鍵所在！
代碼分析
Step1：toast組件接收js傳遞過來的toastHidden初始值（true），此時(shí)toast隱藏。
Step2：js程序判斷文章條數(shù)全部加載出來后，將toastHidden值設(shè)為false，此時(shí)toast顯示。
Step3：hidden接到false的時(shí)候觸發(fā)bindchange事件并執(zhí)行coastchange函數(shù)（coastchange執(zhí)行前會(huì)有一個(gè)延時(shí)（duration），默認(rèn)1500毫秒），函數(shù)中將toastHidden的值設(shè)置為true，此時(shí)toast組件再次隱藏。
