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

NO IMAGE

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

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

代碼實現


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組件的文檔說明。

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

從文檔中得知bindchange事件觸發條件需要hidden的值為false。toastchange函數綁定在bindchange事件上,因此toastchange函數在hidden的值為false的時候執行。這裡回看js中hidden的值設為false的地方。

微信小程序toast組件中bindchange事件觸發條件紅色框裡的代碼就是關鍵所在!

代碼分析

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

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

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

最後

覺得文章不錯的話,給我個關注哇,點個讚唄!

如果對文章有疑問或想技術交流,可關注公眾號【GitWeb】與我一起探索學習!

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

相關文章

Python進階之道

白話分析自適應跟響應式的區別

swiper.js簡單快速實現輪播滑動(兼容PC端、移動端)

微信小程序wx.request請求數據報錯:不在以下request合法域名列表中