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

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

0 (2).gif

代碼實現 微信小程序

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.jsthis

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.jsspa

toastchange函數在哪裏被執行了?3d

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

0.png

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

0 (1).png

代碼分析blog

Step1:toast組件接收js傳遞過來的toastHidden初始值(true),此時toast隱藏。

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

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

相關文章
相關標籤/搜索