页面事件

news2024/11/18 12:28:31

下拉刷新事件

1. 什么是下拉刷新

下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

2. 启用下拉刷新

启用下拉刷新有两种方式:
① 全局开启下拉刷新  在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true
② 局部开启下拉刷新  在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true

在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果。

3. 配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式,其中:
 backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持 16 进制的颜色值
 backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light

4. 监听页面的下拉刷新事件

在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
例如,在页面的 wxml 中有如下的 UI 结构,点击按钮可以让 count 值自增 +1 :
在这里插入图片描述
在触发页面的下拉刷新事件的时候,如果要把 count 的值重置为 0 ,示例代码如下:
在这里插入图片描述

5. 停止下拉刷新的效果

当处理完下拉刷新后,下拉刷新的 loading 效果会一直显示,不会主动消失,所以需要手动隐藏下拉刷新的 loading 效果。此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。
在这里插入图片描述

上拉触底事件

1. 什么是上拉触底

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

2. 监听页面的上拉触底事件

在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。

3. 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px ,在实际开发中,可以根据自己的需求修改这个默认值。

4.实现步骤

① 定义获取随机颜色的方法
在这里插入图片描述
② 在页面加载时获取初始数据
在这里插入图片描述
③ 渲染 UI 结构并美化页面效果
在这里插入图片描述
④ 在上拉触底时调用获取随机颜色的方法
在这里插入图片描述
⑤ 添加 loading 提示效果
在这里插入图片描述
⑥ 对上拉触底进行节流处理
① 在 data 中定义 isloading 节流阀
 false 表示当前没有进行任何数据请求
 true 表示当前正在进行数据请求
② 在 getColors() 方法中修改 isloading 节流阀的值
 在刚调用 getColors 时将节流阀设置 true
 在网络请求的 complete 回调函数中,将节流阀重置为 false
③ 在 onReachBottom 中判断节流阀的值,从而对数据请求进行节流控制
 如果节流阀的值为 true ,则阻止当前请求
 如果节流阀的值为 false ,则发起数据请求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1521642.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络通信与网络协议

网络编程是指利用计算机网络实现程序之间通信的一种编程方式。在网络编程中,程序需要通过网络协议(如 TCP/IP)来进行通信,以实现不同计算机之间的数据传输和共享。在网络编程中,通常有三个基本要素 IP 地址:定位网络中某台计算机端口号port:定…

Java项目:53 springboot校园管理系统的设计与实现014

作者主页:舒克日记 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 1、关于校园管理系统的基本要求: (1)功能要求:可以管理首页、个人中心、院校管理、用户管理、单位类别…

【SQLite数据库】的使用

SQLite数据库 文章目录 SQLite数据库0、linux基础知识补充1、SQLite简介1.1 SQLite & MySQL 的优缺点比较1.2 常见的嵌入式数据库 2、数据库的基本命令和用法2.1 创建数据库2.2 创建一张表格2.3 插入一条数据2.4 增加一列2.5 删2.6 改2.7 查看数据库 3、数据库编程3.1 实验…

通过actions configuration tool进行快速open 软件的定义

这个主要是看到有人可以直接在文件夹中右键打开terminator得到的启发: 首先需要下载工具 sudo apt-get install nautilus-actions下载terminator: sudo apt-get install terminator去软件目录寻找filemanager-action 然后新建一个action&#xff0c…

力扣59. 螺旋矩阵 II

思路:此题思路就是绕圈遍历,全靠条件处理技巧,重点要清楚的就是循环不变量:左闭右开(即拐弯处的一个数,留给第二行处理) 以下是代码随想录的作者的一张图片,每次for循环,…

【计算机组成原理】处理机管理

目录 一、处理机分类 1. MPU 2. MCU 3. DSP 二、CPU的功能 1. 指令控制 2. 操作控制 3. 时间控制 4. 数据加工 三、CPU的组成 (一)控制器 1. 控制器的功能 (1)控制指令执行的顺序 ① 程序中规定的转移类型指令 ② …

ctf_show笔记篇(web入门---代码审计)

301:多种方式进入 从index.php页面来看 只需要访问index.php时session[login]不为空就能访问 那么就在访问index.php的时候上传login 随机一个东西就能进去从checklogin页面来看sql注入没有任何过滤 直接联合绕过 密码随意 还有多种方式可以自己去看代码分析 30…

Linux/secret

Enumeration nmap 第一次扫描发现系统对外开放了22,80和3000端口,端口详细信息如下 可以看到22端口对应的是ssh服务,80和3000都是http服务,80端口使用nginx,3000使用了Node.js TCP/80 可以先从80端口开始探索&…

XXE漏洞原理和pikachu靶场实验

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与学习之用,读者将信息做其他用途,由Ta承担全部法律及连带责任,文章作者不承担任何法律及连带责任。 1、XXE漏洞原理 XXE全称:XML External Enti…

【C++庖丁解牛】List容器的介绍及使用 | 深度剖析 | list与vector的对比

🍁你好,我是 RO-BERRY 📗 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 🎄感谢你的陪伴与支持 ,故事既有了开头,就要画上一个完美的句号,让我们一起加油 目录 1. list的介绍1.1 list的…

外贸灯具行业如何找到精准客户?

外贸灯具行业怎么找客户?分析自己的目标客户群 1:灯具的贸易商,中间商 2:灯具的品牌制造商(做贴牌的可以开发) 3:五金建材超市 4:日用品综合超市 5:小家电产品的批发商,代理商 6:礼品公司 7:照明工程承包商,比如:路灯&#xff0c…

HC32F4A0与HC32F460的io口灵活配置灵活映射功能

华大半导体的HC32F4A0和HC32F460系列单片机在IO口配置灵活性方面具有较高级别的可重映射能力。相较于STM32系列,具体差异如下: HC32F4A0/F460系列: 这两个系列的单片机似乎提供了更为灵活的IO口复用功能。开发笔记中提到,用户可以…

使用Loadrunner进行性能测试

一、确定性能测试的范围、要求、配置、工具等 明确测试的系统: 本文档主要指的是web应用。 明确测试要求: 用户提出性能测试,例如,网站首页页面响应时间在3S之内,主要的业务操作时间小于10s,支持300用户在…

HarmonyOS NEXT应用开发—折叠屏音乐播放器方案

介绍 本示例介绍使用ArkUI中的容器组件FolderStack在折叠屏设备中实现音乐播放器场景。 效果图预览 使用说明 播放器预加载了歌曲,支持播放、暂停、重新播放,在折叠屏上,支持横屏悬停态下的组件自适应动态变更。 实现思路 采用MVVM模式进…

架构设计的核心目的与意义

以史为鉴,对我们了解架构设计的目的很有帮助。谈到架构设计,相信每个技术人员都是耳熟能详,但如果深入探讨一下,“为何要做架构设计?”或者“架构设计目的是什么?”类似的问题,大部分人可能从来…

【ArcGISPro】道路数据下载并使用

下载 下载链接: Geofabrik 下载服务器 这些数据通常 每天更新。 下载结果 arcmap用户下载工具 10.2:http://www.arcgis.com/home/item.html?id=16970017f81349548d0a9eead0ebba39 10.3:

【扩散模型(一)】综述:扩散模型在文本生成领域应用

一、论文信息 1 标题 Diffusion models in text generation: a survey 2 作者 Qiuhua Yi, Xiangfan Chen, Chenwei Zhang, Zehai Zhou, Linan Zhu, Xiangjie Kong 3 研究机构 1 College of Computer Science and Technology, Zhejiang University of Technology, HangZho…

DVWA-File Upload文件上传

什么是文件上传漏洞? 黑客利用文件上传后服务器解析处理文件的漏洞上传一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力。 造成文件上传漏洞的原因: 1.服务器配置不当 2.开源编辑器上传漏洞 3.本地文件上传限制被绕过 4.过滤不严格被…

攻防世界-misc-Make-similar

题目链接:攻防世界 (xctf.org.cn) 下载得到ogg文件。Olympic CTF 2014原题有提示120 LPM,对应Radiofax。需要将ogg格式文件转换成wav格式音频后,用OS X下的软件Multimode转换成单色传真图像: 文字部分为: section 1 of…

重学SpringBoot3-整合SSM

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-整合SSM Spring Boot整合SSM示例1. 创建Spring Boot项目2. 配置数据源3. 配置MyBatis4. 实现数据访问对象(DAO)5. 编写服务层和控…