小程序学习笔记:加载效果、上拉加载与节流处理

在微信小程序开发过程中,优化用户体验是非常重要的一环。今天我们就来分享如何在小程序中实现加载提示效果、上拉触底加载下一页数据以及对上拉触底事件进行节流处理,让你的小程序更加流畅和高效。

一、添加 loading 提示效果

在小程序中,当发起网络请求获取数据时,为了避免用户在等待过程中感到困惑,通常会添加一个 loading 提示效果,告知用户数据正在加载。

实现思路

在发送请求前展示 loading 效果,请求完成(无论成功还是失败)后隐藏 loading 效果。我们可以使用微信小程序提供的wx.showLoadingwx.hideLoading方法来实现。

代码实现

假设我们有一个getShopList函数用于获取商品列表数据,在该函数内部添加 loading 效果的代码如下:

Page({getShopList: function() {// 展示loading效果wx.showLoading({title: '数据加载中...',});// 模拟网络请求,实际开发中这里是真实的请求代码setTimeout(() => {// 请求完成,隐藏loading效果wx.hideLoading();}, 2000);}
});

在上述代码中,wx.showLoading方法用于展示 loading 效果,传入一个包含title属性的对象,用于设置 loading 提示的文本内容。当请求完成后(这里使用setTimeout模拟请求过程),调用wx.hideLoading方法隐藏 loading 效果。

二、上拉触底加载下一页数据

为了提升用户浏览体验,很多小程序会采用上拉触底加载下一页数据的方式,避免一次性加载大量数据造成性能问题。

实现步骤
  1. 配置上拉触底距离:在页面的配置文件(如shoppingList.json)中新增一个属性节点reachBottomDistance,设置上拉触底的距离,比如设置为200像素。
{"reachBottomDistance": 200
}
  1. 在触底事件中增加页码值:在页面的js文件中找到onReachBottom事件处理函数,在函数内部让页码值自增。假设页码值存储在data中的page字段,代码如下:
Page({data: {page: 1},onReachBottom: function() {this.setData({page: this.data.page + 1});}
});
  1. 重新调用获取数据方法:在页码值自增后,重新调用获取商品列表数据的方法getShopList,并传入更新后的页码值,以便获取下一页数据。完整代码如下:
Page({data: {page: 1},getShopList: function(page) {// 模拟网络请求,实际开发中这里是真实的请求代码console.log(`获取第${page}页数据`);},onReachBottom: function() {this.setData({page: this.data.page + 1});this.getShopList(this.data.page);}
});

三、上拉触底事件的节流处理

在网络速度较慢的情况下,用户频繁上拉触底可能会导致连续发起多次请求,加重服务器负担,同时也会影响用户体验。这时就需要对触底事件进行节流处理。

实现思路
通过设置一个节流阀(例如isLoading)来控制请求的发送。当节流阀为false时,表示可以发起请求,发起请求后将节流阀设置为true;当请求完成(无论成功还是失败)后,再将节流阀设置为false。在触底事件中,首先判断节流阀状态,如果为true,则不进行后续操作,等待当前请求完成。

代码实现
Page({data: {page: 1,isLoading: false},getShopList: function(page) {this.setData({isLoading: true});// 模拟网络请求,实际开发中这里是真实的请求代码setTimeout(() => {console.log(`获取第${page}页数据`);this.setData({isLoading: false});}, 2000);},onReachBottom: function() {if (this.data.isLoading) {return;}this.setData({page: this.data.page + 1});this.getShopList(this.data.page);}
});

在上述代码中,getShopList函数在开始请求时将isLoading设置为true,请求完成后设置为falseonReachBottom事件处理函数在触发时首先判断isLoading状态,如果为true则直接返回,避免重复请求。

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

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

相关文章

计算机网络:【socket】【UDP】【地址转换函数】【TCP】

一.socket 1.1socket接口 它返回的是一个文件描述符。创建socket文件描述符(TCP/UDP,客户端服务器) • socket()打开一个网络通讯端口,如果成功的话,就像 open()一样返回一个文件描 述符; • 应用程序可以像读写文件一样用 read/write 在网络上收发数据; • 如果 socket()调用…

机器人轨迹跟踪控制与动力学模型详解

1. 机器人控制的本质:通过关节扭矩执行轨迹 机器人控制的核心目标是让机器人关节精确跟踪期望轨迹 ( q d , q ˙ d , q d ) (q_d, \dot{q}_d, \ddot{q}_d) (qd​,q˙​d​,q​d​)。为此,控制器需根据当前状态 ( q , q ˙ ) (q, \dot{q}) (q,q˙​)计…

智能办公与科研革命:ChatGPT+DeepSeek大模型在论文撰写、数据分析与AI建模中的实践指南

随着人工智能技术的快速发展,大语言模型如ChatGPT和DeepSeek在科研领域的应用正在为科研人员提供强大的支持。这些模型通过深度学习和大规模语料库训练,能够帮助科研人员高效地筛选文献、生成论文内容、进行数据分析和优化机器学习模型。 ChatGPT和Deep…

运营商场景下的实时脱敏方案:PB 级日志流的分布式处理架构

在数字化浪潮中,运营商积累了海量数据,涵盖用户信息、通信记录、业务运营数据等。这些数据不仅是运营商业务运营的关键资产,也是创新服务、精准营销的核心驱动力。然而,随着数据量呈指数级增长,运营商每日需处理 PB 级…

docker+n8n的工作流中无法使用本地ollama服务的问题

使用docker创建n8n服务后,工作流中不想用大模型付费API测试,想用本地大模型来跑,刚好电脑上装了ollama,就试了下添加ollama节点来替代大模型付费API,结果就遇到了以下问题 ollama正常运行中 但是工作流会卡在这&…

通过交互式可视化探索波动方程-AI云计算数值分析和代码验证

波动方程是一个基本的数学模型,它描述了各种类型的波(包括机械波、声波、电磁波和流体波)如何通过不同的介质传播,这使得它对于物理学、工程学和其他科学学科中声学、光学、医学成像和电信等领域的预测和设计都至关重要。 波动方程…

10授权

目录 本节大纲 一、权限管理 1. 认证 2. 授权 二、授权核心概念 三、权限管理策略 1. 基于 URL 权限管理 权限表达式 2. 基于 方法 权限管理 EnableGlobalMethodSecurity 四、基本用法 五、原理分析 六、实战 1. 简介 2. 库表设计 3. 创建 springboot 应用 本节…

线性规划模型

线性规划算是数学建模中最基础的模型了,其典型特征就是线性和有限资源,即在一组线性约束条件下,求解一个线性目标函数的最大值或最小值问题: 其中x 是决策变量向量,c 是目标函数系数向量,a 和 b 分别是约束…

华为云Flexus+DeepSeek征文|体验华为云ModelArts快速搭建Dify-LLM应用开发平台并创建知识库大模型工作流查询数据库数据

华为云FlexusDeepSeek征文|体验华为云ModelArts快速搭建Dify-LLM应用开发平台并创建知识库大模型工作流查询数据库数据 什么是华为云ModelArts 华为云ModelArts ModelArts是华为云提供的全流程AI开发平台,覆盖从数据准备到模型部署的全生命周期管理&am…

WPF中Style和Template异同

在WPF(Windows Presentation Foundation)中,Style和Template是两个核心概念,用于控制UI元素的外观和行为,但它们的职责和使用场景有明显区别。以下是详细分析: 一、基本概念 1. Style(样式&am…

针对 DVWA 中 Command Injection 模块的乱码问题及解决办法

目录 根本原因 解决办法 优化说明 适用范围 系统兼容性 在 DVWA 的 Command Injection 模块中执行系统命令时,返回结果出现乱码(如图1所示)。 根本原因 DVWA 默认使用 UTF-8 编码,而部分系统命令(如 Windows 的…

Linux获取ImageNet数据集方法及小规模imagenet

一、数据集下载 ImageNet官方链接:ImageNet Linux命令直接下载: 训练集 wget https://image-net.org/data/ILSVRC/2012/ILSVRC2012_img_train.tar --no-check-certificate验证集 wget https://image-net.org/data/ILSVRC/2012/ILSVRC2012_img_val.t…

JAVA八股文:异常有哪些种类,可以举几个例子吗?Throwable类有哪些常见方法?

Throwable、Error 与 Exception 所有的异常类型都继承自 java.lang.Throwable。 其中 Error(比如 OutOfMemoryError、StackOverflowError、类加载失败等)表示 JVM 自身或运行环境的问题,不应该也通常无法由应用程序去捕获或恢复,…

.NetCore+Vue快速生产框架开发详细方案

文章目录 1. 项目概述 1.1 项目背景1.2 项目目标1.3 核心功能 2. 技术栈选择 2.1 后端技术栈2.2 前端技术栈2.3 开发工具 3. 系统架构设计 3.1 整体架构3.2 后端架构设计3.3 前端架构设计3.4 微服务考虑 4. 后端.NET核心设计 4.1 项目结构4.2 核心模块设计4.2.1 用户模块4.2.2 …

WPF学习笔记(18)触发器Trigger

触发器 1. 概述2. 详解2.1. Trigger 用法2.2. MultiTrigger 用法2.3. DataTrigger 用法2.4. EventTrigger 用法 总结 1. 概述 官方文档:https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.trigger?viewnetframework-4.8 2. 详解 在Style中可以指定触…

记本好书:矩阵力量:线性代数全彩图解+微课+Python编程

书名:矩阵力量:线性代数全彩图解微课Python编程 作者:姜伟生 出版社:清华大学出版社 出版时间:2023-06-01 ISBN:9787302632511 品牌方:清华大学出版社有限公司 发现一本好书,但是一…

‌Webpack打包流程

Webpack打包流程的核心步骤包括初始化配置、解析入口文件、构建依赖图、模块转换、资源优化和输出文件‌。该流程通过递归分析模块依赖关系,结合加载器和插件处理各类资源,最终生成优化后的静态文件。 ‌核心流程概述‌ ‌初始化配置‌:读取…

入门pytorch-联邦学习

本文联邦学习的代码引用于https://github.com/shaoxiongji/federated-learning 本篇文章相当于带大家读一遍联邦学习的代码,同时加深了大家对联邦学习和Pytorch框架的理解。 这里想简单介绍一下联邦学习。 联邦学习说白了,就是假如有 N N N个数据拥有…

半导体和PN结

1. 什么是半导体? 导体,电阻率小,即电流容易通过的材料;Cu 绝缘体,导电性低,即电流不易通过的材料;塑料 半导体,常温下导电性能介于导体和绝缘体之间,是一种导电可控的…

如何分析大语言模型(LLM)的内部表征来评估文本的“诚实性”

如何分析大语言模型(LLM)的内部表征来评估文本的“诚实性” 基于这样一个假设:模型在生成诚实和不诚实回答时,其内部状态会存在系统性差异 LAT :线性人工断层扫描 我们通过一个生活化的例子来理解如何通过分析大语言模型的内部表征评估文本的“诚实性”。 场景类比:判…