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