微信小程序toast组件中bindchange事件触发条件

比眉伴天荒 2022-02-19 08:41 116阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

微信小程序toast组件是一种消息提示框。例如当文章条数全部加载出来后，用户再次点击**加载更多**的时候，js判断文章条数全部加载出来后，便让toast组件弹出提示用户“没有更多文章了”，效果如下图所示：

![Image 1][]

image

**代码实现**

**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组件的文档说明。

![Image 1][]

image

从文档中得知bindchange事件触发条件需要hidden的值为false。toastchange函数绑定在bindchange事件上，因此toastchange函数在hidden的值为false的时候执行。这里回看js中hidden的值设为false的地方。

![Image 1][]

image

红色框里的代码就是关键所在！

**代码分析**

**Step1：**toast组件接收js传递过来的toastHidden初始值（true），此时toast隐藏。

**Step2：**js程序判断文章条数全部加载出来后，将toastHidden值设为false，此时toast显示。