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

代码实现

List item

index.wxml

1//点击加载更多,执行js里的loadMore函数
2加载更多
3
4//hidden接收js传递过来的toastHidden变量值,为true,toast隐藏;为false,toast显示
5没有更多文章了
复制代码
文件路径: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组件再次隐藏。

小程序toast组件中事件触发条件的更多相关文章

  1. 微信小程序image组件中aspectFill和widthfix模式应用详解

    aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来.也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发 ...

  2. ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样

    问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...

  3. 微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery

    节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.cre ...

  4. 微信小程序,内容组件中兼容的H5组件

    受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a   abbr   address   article   aside   b   bdi   bdo ...

  5. 小程序picker组件中的(普通选择器:mode = selector)

    本例代码借鉴官方picker案例: WXML: <picker bindchange="pickChange" value="{{index}}" ran ...

  6. 小程序--->scroll-view组件不能触发相应滚动事件

    小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚 ...

  7. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  8. 在WePY中实现了小程序的组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在WePY的组件化开发过程中,A组件只会影响到A所绑定的myclick

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...

  9. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  10. 微信小程序_(组件)可拖动movable-view

    微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...

随机推荐

  1. Jenkins添加代理节点

    新建linux节点 新建节点 配置远程工作目录和登录方式SSH 如果没有密码需要手动添加(需要在对应的slave节点存在的用户) 保存即可. 验证节点 新建任务 New Item 选择要运行的节点(这 ...

  2. Dilworth

    Dilworth 定理 偏序集能划分成的最少的全序集个数等于最大反链的大小. 名词解释 偏序 在集合 \(S\) 中定义的二元关系 \(\le\),如果它满足以下三个性质: 自反性:\(\forall ...

  3. Linuxt通过命令lsof或者extundelete工具恢复误删除的文件或者目录

    Linux不像windows有那么显眼的回收站,不是简单的还原就可以了.linux删除文件还原可以分为两种情况,一种是删除以后在进程存在删除信息,一种是删除以后进程都找不到,只有借助于工具还原.这里分 ...

  4. 一、100ASK_IMX6ULL嵌入式裸板学习_LED实验(知识点补充)

    知识点补充: Linux进程中的五个段 BSS段(Block Started bySymbol,意为"以符号开始的块"):   BSS,是Unix链接器产生的未初始化数据段.通常是 ...

  5. 南大ics-pa/PA1.1过程及感想

    1.1 一.在红白模拟器上运行超级马里奥游戏 1.将游戏rom文件mario.nes移至~/ics2022/fceux-am/nes/rom文件下,并回到~/ics2022/fceux-am下执行ma ...

  6. FastJson JdbcRowSetImpl

    Java安全之FastJson JdbcRowSetImpl 链分析 利用限制 RMI利用的JDK版本≤ JDK 6u132.7u122.8u113 LADP利用JDK版本≤ 6u211 .7u201 ...

  7. Linux_CMD_FOR_FILE&FOLDER

    0,删除文件夹和子文件夹:rm -rf /xxx/xxx 0,拷贝整个文件夹:cp -r /xxx/xxx /ddd/ 0,改文件名:mv oldName newName 0,新建文件:touch f ...

  8. <string> <cstring> <string.h>

    <string>是C++标准库头文件,包含了拟容器class std::string的声明(不过class string事实上只是basic_string<char>的type ...

  9. new与delete只能被重载为成员函数;而<<等只能被重载为非成员函数

    链接:https://www.nowcoder.com/questionTerminal/5760864337084de6891a9944f41e60f4来源:牛客网 应用程序可以将重载的new/de ...

  10. 2023 01 19 HW

    2023 01 19 HW Okay, then let's start.  Okay. Maybe Karina, we start with the C2 design freeze. Yeah, ...