微信小程序Loading加载+提示框（微信小程序）

最新推荐文章于 2025-03-17 20:53:32 发布

神之意向、

最新推荐文章于 2025-03-17 20:53:32 发布

阅读量1.2w

点赞数 15

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_37018534/article/details/122083734

版权

效果演示

1.Loading加载界面

请添加图片描述

2.提示框

请添加图片描述

代码实现

1.Loading加载界面----方法1

应用场景：显示loading -> 你要做的事 -> 隐藏loading，缓解用户焦虑

//显示加载界面
wx.showLoading({
     // 显示加载中loading效果 
    title: "加载中",
    mask:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

神之意向、

关注关注

15
点赞
踩
41

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序--Loading组件

xiaotuni的专栏,每天进步一点点

08-09

1万+

Loading组件这两天都在看微信小程序开发，在看的过程当中，也会自己写写，有的时候，这个时候就会想到，以前项目当中如ReactJs里会有一些公共的组件好多地方都要用到，于就是想着微信小程序里如何提取出来。在小程序里提取公共部分叫template。在其它页面上要用的时候，只要引用就可以了，下面就是如何创建一个的步骤吧，自己也标记一下。效果如下所示，所有完整的代码都github上找到。创建一个

微信小程序开发系列（二十九）·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框

时光の尘的博客

03-13

4417

小程序提供了一些用于界面交互的 API，例如：loading 提示框、消息提示框、模态对话框等 API。

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

微信小程序两种loading加载中显示方式

CherryLee_1210的博客

02-22

8633

在微信开发中，为了用户更加友好的体验，一般在数据请求的时候就显示动态加载中的显示字样，表示数据正在加载，用户请耐心等待。一般有两种显示方式（其实是三种，showToast和showLoading写法类似）。 No.1 正常显示在页面中间的加载中 // 显示 wx.showLoading({ title: '加载中', }); // 隐藏 wx.hideLoading(); // 也可以使用Toast方式 // 显示 wx.showToast({ title: '成功', icon: 'su

小程序API —— 51小程序界面交互 - loading 提示框

最新发布

然后就去远行

03-17

589

当用户点击按钮时，小程序会发送请求获取数据，在发送请求过程中需要显示 loading 提示框，同时给用户文字提示；当数据请求完成之后，关闭 loading 提示框；注意 loading 提示框显示之后不会自动关闭，必须主动调用 hideLoading 方法才能关闭 loading 提示框；小程序提供了一些用于界面交互的 API，例如 loading 提示框、消息提示框、模态对话框等 API；

微信小程序显示loading效果，微信小程序节流效果，微信小程序生命周期，微信小程序组件的创建与使用

Kerwin__li的博客

01-07

5678

请求前显示loading 效果，请求结束后隐藏loading。

微信小程序开发实战：添加 loading 提示效果与上拉触底节流处理

m0_57836225的博客

01-25

1034

在微信小程序开发过程中，为了提升用户体验，常常需要添加一些交互效果，比如 loading 提示效果，以及对上拉触底进行节流处理，避免频繁请求数据。今天，就带大家详细了解这两个功能的实现方法。

小程序 loading

weixin_46146313的博客

06-07

306

loading 使用 <view> <button loading="buttonLoading">加载中 </button> </view> 效果总结：在小程序过程中非常的简丹，易上手。我们直接把loading属性加载button按钮上就可以实现加载中的状态效果，那么我们在获取到数据之前让其显示，获取到数据之后让其消失，即可实现页面功能。 ...

微信小程序 loading（加载中提示框）实例

09-01

在本文中，我们将深入探讨如何在微信小程序中实现`loading`（加载中提示框）实例。首先，我们需要了解`loading`组件的基本结构。在微信小程序的`.wxml`（WXML是微信小程序的结构层语言，类似于HTML）文件中，我们...

微信小程序 loading 组件实例详解

09-01

微信小程序的`loading`组件是开发者在构建应用时经常用到的一个组件，它主要用于表示数据加载状态，给用户展示一个正在处理的过程，增加用户体验的友好性。本篇将深入讲解`loading`组件的实例和使用方法。 ### 1. `...

微信小程序-消息提示框实例

09-01

【微信小程序消息提示框】 微信小程序提供了一套丰富的消息提示组件，用于在用户操作后给出反馈，增强用户体验。其中，消息提示框主要包括三种类型：`wx.showToast`、`wx.showModal` 和 `wx.showActionSheet`。 1....

[微信小程序]自定义Loading消息框组件封装

saltfish121的博客

07-18

1407

组件很快就封装好了，一直在尝试是否能够写一个类似 wx. showLoading () 这样的调用即唤出 loading 消息的函数，一直出现各种各样的问题导致最终没能实现，一是作者自身能力有限，二是小程序并没有 Vue 这样的灵活，想到的很多写法在 Vue 上能够实现但是在微信小程序中并不可以…还是给大家分享一下我封装的组件吧。

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

01-03

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

小程序----Loading

scwMason的博客

09-23

428

<view class="body-show"> <loading hidden="{{hidden}}">Loading... </loading> <button type='default' bindtap='loadingClick'>弹出Loading</button> </view&

微信小程序把玩（二十五）loading组件

FUCK

09-26

2万+

loading通常使用在请求网络数据时的一种方式，通过hidden属性设置显示与否主要属性：wxml <button type="primary" bindtap="listenerButton">显示loading</button>  <loading hidden="{{hiddenLoading}}">正在加载</loading>jsPage({ dat

自定义加载动画的全局实现（小程序版）

VerseImmortal的博客

07-19

4831

uniapp+vue2编译微信小程序，理论上也适用于原生小程序、H5、App等。

微信小程序之----加载中提示框loading

weixin_30814329的博客

10-27

1069

loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button&...

小程序--loading和toast

sinat_34896766的博客

02-20

887

icon：是否使用图标，不使用设为none。mask：是否显示透明蒙层，防止触摸穿透。wx.showToast({})显示消息提示框（轻提示）。mask：是否显示透明蒙层，防止触摸穿透。duration：延迟时间。title：文字提示内容。显示loading提示框。隐藏loading提示框。

微信小程序-显示loading的几种方式