在微信小程序中如何使用Loading组件显示载入动画

最新推荐文章于 2025-05-13 08:42:11 发布
最新推荐文章于 2025-05-13 08:42:11 发布
阅读量1.9k 收藏
点赞数
文章标签： 微信小程序 小程序 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/133621754
版权
js 专栏收录该内容
499 篇文章 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了如何在微信小程序中创建和使用Loading组件，包括在组件文件夹中创建loading.wxml和loading.wxss文件，自定义样式，以及在页面脚本中控制显示和隐藏，以提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Loading组件是微信小程序中常用的一种UI组件，用于在数据加载过程中显示载入动画，提高用户体验。本文将详细介绍如何在微信小程序中使用Loading组件，并提供相应的源代码示例。

  1. 创建Loading组件

首先，在小程序的组件文件夹中创建一个名为"loading"的文件夹，并在该文件夹下创建以下两个文件：

1.1 loading.wxml

在loading.wxml文件中，编写用于显示载入动画的代码。可以使用小程序的内置样式类"wx-loading"来设置Loading组件的样式。

<view class="loading">
了解本专栏 订阅专栏 解锁全文
【微信小程序】自定义加载动画2
海到无边天作岸 山登绝顶我为峰
10-03 1412
Hello！ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，获得过国家奖学金，有幸在竞赛中拿过一些国奖、省奖…已保研学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！唯有努力💪。
【微信小程序】自定义加载动画
海到无边天作岸 山登绝顶我为峰
10-03 3079
在编写微信小程序的代码时，我们会发现：原生加载动画样式不多，可供我们设置的参数也不多。通过查询可以得知，若是需要自己定义加载动画，一般的做法就是：在当前页面写加载动画的view代码，通过使用wx:if来控制该动画的显示。这样做在一定程度上也是可以实现需求，但是如果每个需要过度动画的页面都复写一遍该动画view代码，那么就会显得有点冗余。下面部分将分享如何自定义加载动画ଘ(੭ˊᵕˋ)੭对于一个需要使用自定义加载动画的页面一般步骤就是在json中引入组件js中添加变量loadingFlag。
基于wepy开发的微信小程序loading加载动画组件
08-10
基于wepy开发的微信小程序loading加载动画组件
【微信小程序｜组件库】自定义加载动画（1）
海到无边天作岸 山登绝顶我为峰
05-01 9530
前言         在编写微信小程序的代码时，我们会发现：原生加载动画样式不多，可供我们设置的参数也不多。         通过查询可以得知，若是需要自己定义加载动画，一般的做法就是：在当前页面写加载动画的view代码，通过使用wx:if来控制该动画的显示。        &nb
微信小程序2---实现耗时操作的加载动画
最新发布
涉及毕业论文、远程调试、网站、小程序、app、python、前端、pycharm、vscode等
05-13 293
微信小程序2---实现耗时操作的加载动画
微信小程序loading加载动画
苏苏就是小苏苏的博客
03-04 5586
1.实现效果 2.实现原理 伪元素 animation 3.实现代码 <view class="box"> <view class="charge"> <view class="wave"></view> </view> </view> <view class="box"> <view class="loading1"></view> </view> <vi
微信小程序封装全局加载动画loading
qq_44749901的博客
06-18 1592
封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。确保调用 selectComponent 的时机是在组件渲染完成之后，可以在 onReady 或 onLoad 生命周期方法中使用。在components新建Loading组件，用来展示动画，并在组件中实现开启和结束动画的方法。注意：在onLaunch调用无效。比如：index.html。
微信小程序loading组件显示载入动画用法示例【附源码下载】
12-29
本文实例讲述了微信小程序loading组件显示载入动画用法。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ① index.wxml <loading hidden={{loadingHidden}}> 加载中... </loading> <button type=...
微信小程序自定义loading组件显示载入动画方法
09-21
要自定义微信小程序的loading组件显示载入动画方法，可以按以下步骤进行： 1. 创建一个新的组件：首先，在小程序项目中创建一个新的组件，在组件目录下新建一个文件夹，例如命名为loading，在该文件夹下创建两个...
微信小程序实现一些炫酷的loading动画
苏苏就是小苏苏的博客
02-17 5009
1.实现效果 2.实现原理 .伪元素 .css3动画 .transform 3.实现代码 从上到下，从左到右依次的代码如下 <!--pages/subPack/loading/index.wxml--> <view class="title">样式一：</view> <view class="ring"> <view>sss</view> <view class="line"></view> &lt
微信小程序加载动画
ddzr972435946的博客
06-10 2123
补充一下这篇文章 里的第二个例子的代码。 wxml 文件： <view class="tui-loading-row"> <view class="tui-loading-cell"> <!--第一个动画，省略，见原文章--> </view> <view class="tui-loading-cell"> <view class="circle-line-spin" > <tex...
微信小程序-加载及完成动画-loadingAnim.rar
01-11
微信小程序-加载及完成动画
微信小程序自定义组件-loading.rar
01-03
直接解压到自己的项目中即可，需要注意图片路径,在页面中使用this.selectComponent("#loading").show(); this.selectComponent("#loading").hide(); 控制显示隐藏
微信小程序纯CSS实现好看的加载动画
Qensq的博客
04-01 1896
【代码】微信小程序纯CSS实现好看的加载动画。
小程序封装加载动画_小程序加载动画
2401_84187563的博客
04-12 949
在需要用到加载动画的地方，通过调用App.js中的showLoading方法显示Loading动画，并在数据加载完毕后调用hideLoading方法关闭Loading动画。封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。在App.js中加载自定义组件Loading，并设定全局方法showLoading和hideLoading来显示和隐藏Loading组件。
微信小程序加载动画文件
hellosnowyy
07-16 835
最近在做微信小程序的动画，调研了几种方案。
模拟微信小程序加载动画
T3165919332的博客
08-22 2112
效果：绿圆会围着轨道旋转。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值