[小程序]页面事件

一、下拉刷新

        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.mzph.cn/news/639410.shtml

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

相关文章

Qt应用开发(安卓篇)——Hello Qt On Android

一、前言 这一篇从实际出发&#xff0c;讲述如何创建、编译和部署Qt On Android项目。 二、ADB调试 ADB的全称为Android Debug Bridge&#xff0c;就是起到调试桥的作用&#xff0c;主要用于连接计算机与Android 设备&#xff0c;以便进行调试和数据传输。ADB 可以实现以下主要…

uniapp组件库SwipeAction 滑动操作 使用方法

目录 #平台差异说明 #基本使用 #修改按钮样式 #点击事件 #API #Props #Event 该组件一般用于左滑唤出操作菜单的场景&#xff0c;用的最多的是左滑删除操作。 注意 如果把该组件通过v-for用于左滑删除的列表&#xff0c;请保证循环的:key是一个唯一值&#xff0c;可以…

HNU-数据挖掘-实验3-图深度学习

数据挖掘课程实验实验3 图深度学习 计科210X 甘晴void 202108010XXX 文章目录 数据挖掘课程实验<br>实验3 图深度学习实验背景实验要求数据集解析实验内容&#xff08;0&#xff09;基础知识&#xff1a;基于图的深度学习方法浅识&#xff1a;图卷积网络 (GCN)浅识&…

【Linux】第三十二站:命名管道

文章目录 一、命名管道介绍二、编码1.mkfifo2.unlink3.一个简单的例子4.修改 一、命名管道介绍 管道应用的一个限制就是只能在具有共同祖先&#xff08;具有亲缘关系&#xff09;的进程间通信。 如果我们想在不相关的进程之间交换数据&#xff0c;可以使用FIFO文件来做这项工作…

14 STM32 - IIC (时序图+软件源码)

14.1 IIC简介 IIC&#xff08;Inter-Integrated Circuit&#xff09;&#xff0c;中文集成电路总线&#xff0c;是一种串行通信总线&#xff0c;使用多主从架构。I2C串行总线一般有两根信号线&#xff0c;一根是双向的数据线SDA&#xff0c;另一根是时钟线SCL。所有接到I2C总线…

【蓝桥杯备赛Java组】语言基础|竞赛常用库函数|输入输出|String的使用|常见的数学方法|大小写转换

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;蓝桥杯&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 一、编程基础 1.1 Java类的创建 1.2 Java方法 1.3 输入输出 1.4 String的使用 二、竞赛常用库函数 1.常见的数学方法 2.大小写转…

php基础学习之代码框架

一&#xff0c;标记 脚本标记&#xff08;已弃用&#xff09;&#xff1a;<script language"php"> php代码 </script> 标准标记&#xff1a;<?php php代码 ?> 二&#xff0c;基础输出语句 不是函数&#xff0c;…

【WSL】[出现错误 2147944320 (0x80070780) (启动“ubuntu.exe”时)]

问题描述 在尝试启动 Windows Subsystem for Linux (WSL) 的 “ubuntu.exe” 时&#xff0c;可能会遇到以下错误&#xff1a; [出现错误 2147944320 (0x80070780) (启动“ubuntu.exe”时)]错误的截图如下&#xff1a; 原因分析 系统找不到指定的文件。在这种情况下&#xff…

Git提交 ssh: connect to host github.com port 22: Connection timed out解决方案

你们好&#xff0c;我是金金金。 场景 之前都是好好的&#xff0c;不知道今天为什么提交代码就这样了 排查 根据英文可以看出&#xff0c;ssh端口号被拒绝了&#xff0c;22号端口不行&#xff0c;那就换一个端口 造成error的原因 ssh端口被拒绝 解决 找到.ssh文件&#xff…

CLion调试Nodejs源码

【环境】 macOS node-v20.11.0源码 CLion 2023.3.2 【1】下载源码 https://nodejs.org/en/download/ 【2】编译源码 解压后的目录如下 进入解压后的目录进行编译 ./configure --debug make -C out BUILDTYPEDebug -j 4需要好久… 编译成功之后在node-v20.11.0目录下会有一个…

【Web实操11】定位实操_照片墙(无序摆放)

设置一个板块&#xff0c;将照片随意无序摆放在墙上&#xff0c;从而形成照片墙。本来效果应该是很唯美好看的&#xff0c;就像这种&#xff0c;但是奈何本人手太笨&#xff0c;只好设置能达到照片墙的效果就可。 代码如下&#xff1a; <!DOCTYPE html> <html lang&…

JavaEE的MVC(Model-View-Controller)设计模式

JavaEE的MVC&#xff08;Model-View-Controller&#xff09;设计模式是一种用于组织和管理Web应用程序的架构模式。MVC模式将应用程序分为三个主要组件&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#x…

binary_search_tree的介绍与实现(二叉搜索树精美图示详解哦)

二叉搜搜索树 引言二叉搜索树的介绍二叉搜索树的实现框架默认成员函数构造析构赋值重载 InsertR&#xff08;插入&#xff09;EraseR&#xff08;删除&#xff09;SearchR&#xff08;查找&#xff09; 源码概览总结 引言 在C语言部分&#xff0c;我们已经认识了树与二叉树的结…

python使用分治算法找出出现次数最多的数字

对于给定的一个长度为n的数组nums&#xff0c;需要找出起重工出现次数大于n/2向下取整的元素&#xff0c;假设给定的数组中一定存在符合给定要求的数&#xff0c;例如给定如下的例子&#xff1a; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 添加图片注…

docker使用http_proxy配置代理

钢铁知识库&#xff0c;一个学习python爬虫、数据分析的知识库。人生苦短&#xff0c;快用python。 在内网服务器中&#xff0c;docker经常需要下载拉取镜像&#xff0c;但由于没有网络要么只能手动导入镜像包&#xff0c;又或者通过http_proxy代理到其它服务器下载。 解决方法…

看书标记【R语言数据分析项目精解:理论、方法、实战 9】

看书标记——R语言 Chapter 9 文本挖掘——点评数据展示策略9.1项目背景、目标和方案9.1.1项目背景9.1.2项目目标9.1.3项目方案1.建立评论文本质量量化指标2.建立用户相似度模型3.对用户评论进行情感性分析 9.2项目技术理论简介9.2.1评论文本质量量化指标模型1.主题覆盖量2.评论…

FA-分配行重分配报错【APP-OFA-48313】

FA-重分配行报错 已存在行只能分多次转移调整 Ref1&#xff1a; APP-OFA-48313 You Cannot Create Identical Distribution Lines with Transfer (Doc ID 336894.1) APPLIES TO: Oracle Assets - Version 11.5.10.0 and later Information in this document applies to any…

Ubuntu20 服务器版磁盘扩容

Ubuntu20 服务器版磁盘扩容 Ubuntu20 服务器版磁盘不够用进可以使用fdisk命令对磁盘进行扩容 本案例中是基于vmware虚拟化环境下&#xff0c;ubuntu服务器按默认磁盘大小16G进行安装后&#xff0c;运行一段时间后发面/分区磁盘空间全部用完&#xff0c;导致服务无法正常运行。基…

计算机网络自顶向下Wireshark labs1-Intro

Wireshark labs1 实验文档&#xff1a;http://www-net.cs.umass.edu/wireshark-labs/Wireshark_Intro_v8.0.pdf 介绍 加深对网络协议的理解通常可以通过观察协议的运行和不断调试协议来大大加深&#xff0c;具体而言&#xff0c;就是观察两个协议实体之间交换的报文序列&…

React三大属性

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…