小程序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的移动方向,属性值 ...
随机推荐
- pycharm的基本操作数据类型
prcharm的基础操作 1.切换版本翻译器 file-settings-project-interpeter 注释 1.单行注释 添加注释:#加上需要添加的注释 快捷键:ctrl+? 自动进行格式化 ...
- iOS 制作一个动态库
方式一 1.新建一个framework 命名为test 2.将build archive architecture only 改成 NO 3.将Mach-O Type 改成 static Lib ...
- Java使用RestTemplate发送Post请求时携带参数
String url = "https://www.baidu.com"; HttpHeaders headers = new HttpHeaders(); //设置请求头,自己从 ...
- vs 工具 dumpbin & corflags
dumpbin 查看 dll 接口函数 > dumpbin /exports "/path/to/dll" dumpbin 查看 exe.dll 依赖的动态库 > du ...
- css animation 复刻
今天做了一个七巧板的小页面,发现对于css动画一些内容又有了新的认识,所以以下准备复习一遍 首先一共有以下属性 @keyframes 如果您在 @keyframes 规则中指定了 CSS 样式,动画将 ...
- AcWing 841. 字符串哈希 2022/5/25
include include using namespace std; typedef unsigned long long ULL; char str[N]; //存放字符串 int h[N], ...
- 无锡哲讯谈饲料加工行业ERP的功能
我国饲料生产与国际先进水平很接近,也是专业化水平较高的行业.随着社会分工的进一步明确,饲料产品的专业化配送将是未来发展的方向.在一些发达国家,专业化的散装配料车已经普遍应用,我国虽然也有这种形式,但是 ...
- SQL_TIP_JOIN_x
没有条件的JOIN会导致数据数量变为两表的数据量的乘积结果. 用ON来在这些结果里进行筛选 on T1.A = T2.A的时候,如果T1的A是不重复的,则实际上是在对T2现有数据做筛选,结果数据量&l ...
- 阿里云centos7安装图形界面gnome
这应该是很无聊很蛇精的操作吧. 首先命令行远程登陆阿里云,然后root身份更新系统,安装gnome这些操作(菜如我以前都没有操作过),参照网上虚拟机的教程. # yum update -y # yum ...
- Jmeter 请求或响应中文乱码
1.首先检查 请求编码和后台接受编码是否一致,如果在查看结果树中 请求的中文不是乱码 而添加到后台程序是乱码 一般都是请求和接受编码不一致造成的 2.如果请求是get 请求中有中文 Content e ...