小程序toast组件中事件触发条件
微信小程序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组件中事件触发条件的更多相关文章
- 微信小程序image组件中aspectFill和widthfix模式应用详解
aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来.也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发 ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery
节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.cre ...
- 微信小程序,内容组件中兼容的H5组件
受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a abbr address article aside b bdi bdo ...
- 小程序picker组件中的(普通选择器:mode = selector)
本例代码借鉴官方picker案例: WXML: <picker bindchange="pickChange" value="{{index}}" ran ...
- 小程序--->scroll-view组件不能触发相应滚动事件
小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚 ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 在WePY中实现了小程序的组件化开发,组件的所有业务与功能在组件本身实现,组件与组件之间彼此隔离,上述例子在WePY的组件化开发过程中,A组件只会影响到A所绑定的myclick
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序_(组件)可拖动movable-view
微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...
随机推荐
- Jenkins添加代理节点
新建linux节点 新建节点 配置远程工作目录和登录方式SSH 如果没有密码需要手动添加(需要在对应的slave节点存在的用户) 保存即可. 验证节点 新建任务 New Item 选择要运行的节点(这 ...
- Dilworth
Dilworth 定理 偏序集能划分成的最少的全序集个数等于最大反链的大小. 名词解释 偏序 在集合 \(S\) 中定义的二元关系 \(\le\),如果它满足以下三个性质: 自反性:\(\forall ...
- Linuxt通过命令lsof或者extundelete工具恢复误删除的文件或者目录
Linux不像windows有那么显眼的回收站,不是简单的还原就可以了.linux删除文件还原可以分为两种情况,一种是删除以后在进程存在删除信息,一种是删除以后进程都找不到,只有借助于工具还原.这里分 ...
- 一、100ASK_IMX6ULL嵌入式裸板学习_LED实验(知识点补充)
知识点补充: Linux进程中的五个段 BSS段(Block Started bySymbol,意为"以符号开始的块"): BSS,是Unix链接器产生的未初始化数据段.通常是 ...
- 南大ics-pa/PA1.1过程及感想
1.1 一.在红白模拟器上运行超级马里奥游戏 1.将游戏rom文件mario.nes移至~/ics2022/fceux-am/nes/rom文件下,并回到~/ics2022/fceux-am下执行ma ...
- FastJson JdbcRowSetImpl
Java安全之FastJson JdbcRowSetImpl 链分析 利用限制 RMI利用的JDK版本≤ JDK 6u132.7u122.8u113 LADP利用JDK版本≤ 6u211 .7u201 ...
- Linux_CMD_FOR_FILE&FOLDER
0,删除文件夹和子文件夹:rm -rf /xxx/xxx 0,拷贝整个文件夹:cp -r /xxx/xxx /ddd/ 0,改文件名:mv oldName newName 0,新建文件:touch f ...
- <string> <cstring> <string.h>
<string>是C++标准库头文件,包含了拟容器class std::string的声明(不过class string事实上只是basic_string<char>的type ...
- new与delete只能被重载为成员函数;而<<等只能被重载为非成员函数
链接:https://www.nowcoder.com/questionTerminal/5760864337084de6891a9944f41e60f4来源:牛客网 应用程序可以将重载的new/de ...
- 2023 01 19 HW
2023 01 19 HW Okay, then let's start. Okay. Maybe Karina, we start with the C2 design freeze. Yeah, ...