微信小程序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. pycharm的基本操作数据类型

    prcharm的基础操作 1.切换版本翻译器 file-settings-project-interpeter 注释 1.单行注释 添加注释:#加上需要添加的注释 快捷键:ctrl+? 自动进行格式化 ...

  2. iOS 制作一个动态库

    方式一 1.新建一个framework  命名为test 2.将build archive architecture only  改成  NO 3.将Mach-O Type 改成 static Lib ...

  3. Java使用RestTemplate发送Post请求时携带参数

    String url = "https://www.baidu.com"; HttpHeaders headers = new HttpHeaders(); //设置请求头,自己从 ...

  4. vs 工具 dumpbin & corflags

    dumpbin 查看 dll 接口函数 > dumpbin /exports "/path/to/dll" dumpbin 查看 exe.dll 依赖的动态库 > du ...

  5. css animation 复刻

    今天做了一个七巧板的小页面,发现对于css动画一些内容又有了新的认识,所以以下准备复习一遍 首先一共有以下属性 @keyframes 如果您在 @keyframes 规则中指定了 CSS 样式,动画将 ...

  6. AcWing 841. 字符串哈希 2022/5/25

    include include using namespace std; typedef unsigned long long ULL; char str[N]; //存放字符串 int h[N], ...

  7. 无锡哲讯谈饲料加工行业ERP的功能

    我国饲料生产与国际先进水平很接近,也是专业化水平较高的行业.随着社会分工的进一步明确,饲料产品的专业化配送将是未来发展的方向.在一些发达国家,专业化的散装配料车已经普遍应用,我国虽然也有这种形式,但是 ...

  8. SQL_TIP_JOIN_x

    没有条件的JOIN会导致数据数量变为两表的数据量的乘积结果. 用ON来在这些结果里进行筛选 on T1.A = T2.A的时候,如果T1的A是不重复的,则实际上是在对T2现有数据做筛选,结果数据量&l ...

  9. 阿里云centos7安装图形界面gnome

    这应该是很无聊很蛇精的操作吧. 首先命令行远程登陆阿里云,然后root身份更新系统,安装gnome这些操作(菜如我以前都没有操作过),参照网上虚拟机的教程. # yum update -y # yum ...

  10. Jmeter 请求或响应中文乱码

    1.首先检查 请求编码和后台接受编码是否一致,如果在查看结果树中 请求的中文不是乱码 而添加到后台程序是乱码 一般都是请求和接受编码不一致造成的 2.如果请求是get 请求中有中文 Content e ...