阅读 304

微信小程序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

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


从文档中得知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组件再次隐藏。


最后

觉得文章不错的话,给我个关注哇,点个赞呗!

如果对文章有疑问或想技术交流,可关注公众号【GitWeb】与我一起探索学习!