[小程序]页面事件

news2024/9/25 3:27:23

一、下拉刷新

        1.开启和配置

        小程序中开启下拉刷新的方式有两种:

        ①全局开启下来刷新

                在app.json的window节点中,设置enablePullDownRefresh设为ture。

        ②局部开启下来刷新

                在页面对应的json文件的的window节点中,设置enablePullDownRefresh设为ture。

        还可以通过设置backgroundColor和backgroundTextStyle来配置下拉窗口的颜色的loading样式。

"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"

        2.监听新事件

        在对应页面的js文件中使用onPullDownRefresh()进行监听。

<view>下拉次数{{Timer}}</view>
  onPullDownRefresh() {
    this.setData({Timer:this.data.Timer+1});
    wx.stopPullDownRefresh(); //处理完成,停止下拉刷新效果
  },

二、上拉触底

        1.触底监听

        在页面的js文件中使用onReachBottom()进行监听

  onReachBottom() {
    this.setData({More:this.data.More+1});
  },

        需要注意的是,使用这个事件需要页面可以向下滑动(即存在列表或页面长于手机屏幕)

        通过onReachBottomDistance来配置上拉触底的行程(默认50px)。

        2.请求节流

        如果在短时间内触底多次,会造成多次请求数据,所以需要在输出处理过程中对请求进行节流。

        思路是设置一个标志位isloading,在监听的处理函数中检查这个标志位,并在处理完成后将标志位复位,在复位之前不再响应下拉。

三、Loading效果

        loading效果不属于页面事件,但是多与页面事件联用,故也放在这里。

        loading框需要使用wx.showLoading()函数显示调用,并使用wx.hideLoading()函数隐藏

wx.showLoading({title:'数据加载中...'})    //唤起loading
wx.hideloading()                          //隐藏loading

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

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

相关文章

yolov5 opencv dnn部署 github代码

yolov5 opencv dnn部署 github代码 源码地址实现推理源码中作者的yolov5s.onnx推理条件python部署(因为python比较简单就直接介绍了)c部署 参考链接 源码地址 yolov5官网还提供的dnn、tensorrt推理链接本人使用的opencv c github代码,代码作者非本人&#xff0c;也是上面作者推…

定向减免!函数计算让轻量 ETL 数据加工更简单,更省钱

作者&#xff1a;澈尔、墨飏 业内较为常见的高频短时 ETL 数据加工场景&#xff0c;即频率高时延短&#xff0c;一般均可归类为调用密集型场景。此场景有着高并发、海量调用的特性&#xff0c;往往会产生高额的计算费用&#xff0c;而业内推荐方案一般为攒批处理&#xff0c;业…

【EI会议征稿通知】2024年第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)

2024年第四届人工智能、自动化与高性能计算国际会议&#xff08;AIAHPC 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Automation and High Performance Computing 2024第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)将于20…

不建Vivado工程,也能看Device视图

不建Vivado工程&#xff0c;也能看Device视图 在FPGA设计与开发中&#xff0c;Device视图和Package视图发挥着重要的作用。 在Device视图下&#xff1a; 可以查看FPGA芯片可用资源 例如&#xff1a;LUT、FF、BRAM、DSP、URAM等的个数&#xff1b; 可以查看关键资源的分布情…

搭建redis服务器

memcached MongoDB Redis 先把数据存储在内存里,如何定期把内存里数据存储在硬盘,一个Key一个Values redis集群存储数据在内存里面 mysql集群存储数据在硬盘里 netstat -utnlp | grep redis-server 查看端口tcp 0 0 127.0.0.1:6379 0.0.0.0:* LISTEN 1970/redis-server 1 …

性能优化(CPU优化技术)-NEON指令介绍

「发表于知乎专栏《移动端算法优化》」 本文主要介绍了 NEON 指令相关的知识&#xff0c;首先通过讲解 arm 指令集的分类&#xff0c;NEON寄存器的类型&#xff0c;树立基本概念。然后进一步梳理了 NEON 汇编以及 intrinsics 指令的格式。最后结合指令的分类&#xff0c;使用例…

thinkadmin上传excel导入数据库

<div class="layui-form-item layui-inline"><button class="layui-btn layui-btn-primary">

正则化逻辑回归实战

一、题目 在正则化逻辑回归的练习中&#xff0c;我们将利用正则化的逻辑回归来预测来自制造工厂的微芯片是否通过了质量保证&#xff08;QA&#xff09;。在质量保证期间&#xff0c;每个微芯片都要经过各种测试&#xff0c;以确保其能够正常工作。假设您是该工厂的产品经理&am…

yolov8 opencv dnn部署 github代码

源码地址 本人使用的opencv c github代码,代码作者非本人 实现推理源码中作者的yolov8s.onnx 推理条件 windows 10 Visual Studio 2019 Nvidia GeForce GTX 1070 opencv4.7.0 (opencv4.5.5在别的地方看到不支持yolov8的推理&#xff0c;所以只使用opencv4.7.0) c部署 环境…

【MySQL】最左匹配原则

最左匹配原则 0x1 简单说下什么是最左匹配原则 顾名思义&#xff1a;最左优先&#xff0c;以最左边的为起点任何连续的索引都能匹配上。同时遇到范围查询(>、<、between、like&#xff09;就会停止匹配。 例如&#xff1a;b 2 如果建立(a&#xff0c;b&#xff09;顺序…

MySQL 索引优化:深入探索自适应哈希索引的奥秘

在数据库管理系统中&#xff0c;索引优化是提高查询性能的关键所在。MySQL 作为最流行的开源关系型数据库管理系统之一&#xff0c;提供了多种索引类型以满足不同查询场景的需求。其中&#xff0c;自适应哈希索引&#xff08;Adaptive Hash Index&#xff0c;AHI&#xff09;是…

Flink实战之DataStream API

接上文&#xff1a;Flink实战之运行架构 Flink的计算功能非常强大&#xff0c;提供的应用API也非常丰富。整体上来说&#xff0c;可以分为DataStreamAPI&#xff0c;DataSet API 和 Table与SQL API三大部分。 其中DataStream API是Flink中主要进行流计算的模块。 DateSet API是…

鸿蒙开发-UI-布局-栅格布局

鸿蒙开发-UI-布局 鸿蒙开发-UI-布局-线性布局 鸿蒙开发-UI-布局-层叠布局 鸿蒙开发-UI-布局-弹性布局 鸿蒙开发-UI-布局-相对布局 文章目录 前言 一、基本概念 二、格栅容器组件 1.栅格系统断点 2.布局的总列数 3.排列方向 4.子组件间距 三、格栅容器子组件 1.span 2.offset 3.…

【Unity小技巧】3D人物移动脚步和跳跃下落音效控制

文章目录 单脚步声多脚步声&#xff0c;跳跃落地音效播放不同材质的多脚步声完结 单脚步声 public AudioClip walkingSound; public AudioClip runningSound;//移动音效 public void MoveSound() {// 如果在地面上并且移动长度大于0.9if (isGround && moveDirection.s…

命令模式介绍

目录 一、命令模式介绍 1.1 命令模式定义 1.2 命令模式原理 1.2.1 命令模式类图 1.2.2 模式角色说明 二、命令模式的应用 2.1 需求说明 2.2 需求实现 2.2.1 抽象命令接口 2.2.2 订单类 2.2.3 厨师类 2.2.4 服务员类 2.2.5 具体命令类 2.2.6 测试类 三、命令模式总…

Ubuntu20.04输入法异常导致的黑屏:fcitx和ibus输入法的卸载与安装

Ubuntu20.04输入法异常导致的黑屏&#xff1a;fcitx和ibus输入法的卸载与安装_ubuntu卸载fcitx-CSDN博客 问题背景 系统&#xff1a;Ubuntu20.04 由于fcitx的不完整配置&#xff0c;导致fcitx输入法无法正常工作。决心卸载所有输入法&#xff0c;重新安装。但是由于在没有完整…

C#使用DateAndTime.DateDiff方法计算年龄

目录 一、计算年龄的方法 二、 DateAndTime类 1.定义 2.常用方法 3.DateDiff(DateInterval, DateTime, DateTime, FirstDayOfWeek, FirstWeekOfYear) 三、使用DateAndTime.DateDiff方法计算年龄 一、计算年龄的方法 使用DateDiff方法计算系统时间与员工生日之间相隔的年…

python-自动篇-办公-用Excel画画

文章目录 代码所遇问题ModuleNotFoundError: No module named xlsxwriterFileNotFoundError: [Errno 2] No such file or directory: 111.jpg 效果附件图片excel 代码 # coding: utf-8from PIL import Image from xlsxwriter.workbook import Workbookclass ExcelPicture(obje…

linux性能优化-磁盘I_O优化

1.文件系统 1.1.文件系统的工作原理 文件系统是在磁盘的基础上&#xff0c;提供了一个用来管理文件的树状结构。 接下来我们就看看Linux 文件系统的工作原理。 1.1.1索引节点和目录项 在 Linux 中一切皆文件 ,文件系统,本身是对存储设备上的文件&#xff0c;进行组织管理的…

TDSQL-PG高可用原理与方案设计

笔记主要是把架构具像化到机架图上。 TDSQL-PG的高可用方案主要通过每个部件的多副本冗余来实现&#xff0c;当一个部件的主部件出现故障不可恢复&#xff0c;系统将会自动重新选出对应的备份部件取代原来的主部件。而强同步复制是在节点级保证每个节点的主从数据完全一致&…