微信小程序wx.showLoading

最新推荐文章于 2025-06-13 17:18:09 发布

转载最新推荐文章于 2025-06-13 17:18:09 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/520BigBear/p/10394526.html

本文介绍如何在微信小程序中实现加载动画效果，通过调用wx.showLoading API显示加载提示，并在请求完成后隐藏。提供了完整的代码示例，包括显示和隐藏加载动画的函数。

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

效果图：

代码：

wx.showLoading({
      title: '加载中...',
})
wx.request({
  url: '',
  success(res){},
  fail(){},
  complete(){
    wx.hideLoading()
  }
})

小程序官方api https://developers.weixin.qq.com/miniprogram/dev/api/wx.showLoading.html

转载于:https://www.cnblogs.com/520BigBear/p/10394526.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33994444

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【微信小程序】微信小程序 wx.reLaunch：5分钟学会重置页面栈，你get到了吗？

java专栏

11-23

787

是微信小程序提供的一个路由方法，用于关闭所有页面，并跳转到应用内的某个页面。这个方法非常适合一些重要流程的重定向，比如用户完成注册后跳转到首页，或者用户退出登录后跳转到登录页面。通过以上详细介绍，相信你已经对微信小程序的方法有了全面的了解。每种方法都有其特定的使用场景，选择合适的重置页面栈方法可以让你的小程序更加高效、灵活。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。

微信小程序 wx.request封装

JxufeCarol的博客

06-09

2891

参考链接：（1）详解微信小程序网络请求接口封装 https://blog.csdn.net/zyplll/article/details/112272324 （2）微信小程序 wx.request 的封装 https://www.wxapp-union.com/portal.php?mod=view&aid=3660 （3）微信小程序wx.request的简单封装，超详细 https://blog.csdn.net/qq_43677737/article/details/107769366 （4）

参与评论您还未登录，请先登录后发表或查看评论

关于微信小程序wx.showloading（）的使用

最新发布

GanKuRenSheng的博客

06-13

416

是微信小程序提供的一个基础 API，用于显示消息提示框，通常用于轻量级的操作反馈（如 "操作成功"、"加载中" 等）。这个函数非常适合在用户完成某个操作后提供即时反馈，增强用户体验。

微信小程序showModal与showLoading配合使用

欢愉码农的博客

03-13

664

showModal与showLoading实现效果功能：显示模态对话框功能：显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框代码解析：

微信小程序showLoading ,showToast ,hideLoading连续调用出现showLoading 不关闭的情况记录

qq_45797421的博客

09-26

831

类似的代码偶尔会出现showLoading不关闭的现象, 这种情况下的解决方法就是使用定期器包裹showToast可以解决。

微信小程序显示进度条showLoading，关闭进度条hideLoading，消息提示showToast，弹出窗showModal

gdgztt的专栏

12-15

680

微信小程序显示进度条showLoading，关闭进度条hideLoading，消息提示showToast，弹出窗showModal

微信小程序实现倒计时调用相机自动拍照功能

08-27

"微信小程序实现倒计时调用相机自动拍照功能" 微信小程序实现倒计时调用相机自动拍照功能是指在微信小程序中实现倒计时自动拍照的功能，这个功能可以在某些进行签到的场景下使用，防止用户选择相册的照片或者不实时...

微信小程序wx.request封装与刷新token

wu_xue_juan的博客

12-30

2270

大致流程： 1、用户登录之后会返回两个token（access_token，refresh_token），请求数据时，请求头为access_token； 2、当返回值为code=103时（access_token过期时），通过接口（刷新token）api向后端获取新的access_token，请求参数为refresh_token； 3、拿到新的token（access_token，refresh_token）之后替换掉之前的token，重新请求数据接口； 4、如果请求（刷新token）api也过期，则跳到登

【微信小程序】wx.request简易仿Axios封装

LEE210的博客

08-03

283

wx.request()方法不支持Promise风格的调用方式，且无法使用拦截器、baseUrl等功能，我根据自己的使用习惯，对其进行简单封装。

微信小程序自定义组件-loading.rar

01-03

直接解压到自己的项目中即可，需要注意图片路径,在页面中使用this.selectComponent("#loading").show(); this.selectComponent("#loading").hide(); 控制显示隐藏

基于wepy开发的微信小程序loading加载动画组件

08-10

基于wepy开发的微信小程序loading加载动画组件

微信小程序上拉触底案例添加loading效果

weixin_71247694的博客

10-29

1574

小程序上拉触底

微信小程序自定义全屏遮罩弹窗showLoading、showModal组件（可以加载gif图片）

qq_40591925的博客

01-24

1万+

链接:https://pan.baidu.com/s/1PZFCQFMmOWq50moOZAM9gQ (提取码: f774 ) 组件一： wxml.wxml:   <showLoading showloadingMask='{{showloadingMask}}' pathImg=...

一段代码，使用微信云开发上传文件并显示进度

⑥②专栏

06-05

815

一开始使用微信云开发的时候，CDN流量和存储流量都是每个月固定收费的，所以对于那些访问资源正好比免费的多一点的时候，就比较尴尬。还好几经更替，微信云的资源可以开通按量付费，用多少交多少的钱，这个时候再用微信云开发提供的存储、CDN等资源就舒服多了。不论是头像上传，还是音频上传，上传文件对于小程序开发还是比较重要的一个环节。 function uploadFile(filePath, cloudPath) { const uploadTask = wx.cloud.uploadFile({

微信小程序2---实现耗时操作的加载动画

涉及毕业论文、远程调试、网站、小程序、app、python、前端、pycharm、vscode等

05-13

417

微信小程序2---实现耗时操作的加载动画

微信小程序-显示loading的几种方式：showToast 和 showLoading

怎奈你何的博客

01-30

3320

1、组件形式 <loading hidden="{{hidden}}"> 加载中... </loading> 2、动态形式 showToast 和 showLoading wx.showToast() // 设置加载模态框 wx.showToast({title: '加载中', icon: 'loading', duration: 10000}); wx.hideToast(); // 使用案例 wx.showToast({title: '加载中',

微信小程序wx.showLoading()阻止屏幕滑动

Hero_rong的博客

02-21

1万+

小程序，加载图标wx.showLoading wx.showLoading({ title:'加载中', mask:true }) //mask是防止屏幕穿透的，默认是false，所以想要拦截屏幕滑动事件，就一定要记得写这一行 wx.hide...

在微信小程序中如何避免wx.showToast与wx.showLoading调用时的冲突？请提供一个有效的实现策略。

11-06

在微信小程序开发中，`wx.showToast`和`wx.showLoading`两个方法都是用来展示信息给用户，但由于它们共享同一个显示区域，当它们同时或顺序不当被调用时，会出现冲突。具体来说，`wx.showLoading`用于显示加载提示，而`wx.showToast`用于显示简单的文本提示。若在`wx.showLoading`未隐藏的情况下调用`wx.showToast`，可能会导致提示信息无法显示或瞬间消失。参考资源链接：[微信小程序解决showToast与showLoading冲突](https://wenku.csdn.net/doc/6451c356ea0840391e738224?spm=1055.2569.3001.10343) 为了避免这种冲突，我们可以采取以下策略： 1. **调整调用顺序**：确保在调用`wx.showToast`之前，先用`wx.hideLoading`隐藏加载提示。这样可以避免加载提示覆盖了文本提示。 ```javascript wx.showLoading({ title: '正在加载中', }); // 在网络请求结束后调用 wx.hideLoading(); // 先隐藏加载提示 wx.showToast({ title: '成功', duration: 2000, icon: 'success', // 可选 complete: function () { // 提示结束后执行的操作 } }); ``` 2. **合理使用回调函数**：在网络请求的`success`、`fail`、`complete`回调中合理安排显示与隐藏提示框的方法调用。例如，在`success`和`fail`回调中直接使用`wx.hideLoading`和`wx.showToast`，而在`complete`回调中可选择不进行操作，这样可以保持提示信息的独立性和顺序性。 ```javascript wx.request({ url: '你的请求地址', success: function(res) { // 请求成功时的操作 wx.hideLoading(); // 隐藏加载提示 wx.showToast({ title: '请求成功', icon: 'success', duration: 2000, }); }, fail: function() { // 请求失败时的操作 wx.hideLoading(); // 隐藏加载提示 wx.showToast({ title: '请求失败', icon: 'none', duration: 2000, }); }, complete: function() { // 完成后的操作（可选） } }); ``` 3. **避免同时显示两种提示**：在实际开发中，应尽量避免在同一个交互场景中同时显示加载提示和文本提示。如果业务逻辑确实需要同时显示，可以考虑使用`wx.showModal`或自定义提示框来解决。通过上述策略，可以有效地解决`wx.showToast`与`wx.showLoading`在同时调用时出现的冲突问题，保证用户界面的友好性和程序的健壮性。为了进一步了解这些方法的细节和更多高级用法，可以参考《微信小程序解决showToast与showLoading冲突》这一资料，其中详细介绍了如何在实际项目中处理这类问题，并提供了多种实用的示例。参考资源链接：[微信小程序解决showToast与showLoading冲突](https://wenku.csdn.net/doc/6451c356ea0840391e738224?spm=1055.2569.3001.10343)