Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uni-app点击按钮显示 loading 提示框-uni.showLoading(OBJECT)

uni-app点击按钮显示 loading 提示框-uni.showLoading(OBJECT)

作者头像
王小婷
发布于 2025-05-20 03:20:36
发布于 2025-05-20 03:20:36
35000
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

uni.showLoading(OBJECT) 显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

参考文档https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

一些参数说明:

test.vue例子

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <button @click.stop="isLeave()">点击按钮</button>
</template>
<script>
    export default {
        data() {
            return {};
        },
        onLoad() {},
        methods: {
            isLeave(id) {
                uni.showLoading({
                    title: '加载中'
                });
            },
        },
    }
</script>
<style>

</style>

这里需要搭配uni.hideLoading()一起使用 设置加载两秒之后,隐藏一下加载框

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <button @click.stop="isLeave()">点击按钮</button>
</template>
<script>
    export default {
        data() {
            return {};
        },
        onLoad() {},
        methods: {
            isLeave(id) {
                uni.showLoading({
                    title: '加载中'
                });
                
                setTimeout(function () {
                    uni.hideLoading();
                }, 2000);
            },
        },
    }
</script>
<style>

</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uni-app点击按钮显示消息提示框-uni.showToast(OBJECT)
参考文档:https://uniapp.dcloud.io/api/ui/prompt?id=showmodal 示例: uni.showToast({ title: '标题', du
王小婷
2021/07/01
2.9K0
uni-app点击按钮底部弹出提示框-uni.showActionSheet(OBJECT)
参考文档: https://uniapp.dcloud.io/api/ui/prompt?id=showmodal 从底部向上弹出操作菜单 示例 uni.showActionSheet({
王小婷
2021/07/01
8.1K0
uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消
参考文档: https://uniapp.dcloud.io/api/ui/prompt?id=showmodal 显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整
王小婷
2021/07/01
16.3K0
uniapp常用提示框uni.showToast(OBJECT)
记录一下开发经常会用到的几种提示框 前端代码里最常用的,以免忘记了。 官方参考文档:https://uniapp.dcloud.io/api/ui/prompt?id=showtoast 1:成功提
王小婷
2020/08/11
4.1K1
uniapp常用提示框uni.showToast(OBJECT)
uniapp 中的交互反馈 API【提示框】
uniapp 交互反馈文档: https://uniapp.dcloud.net.cn/api/ui/prompt.html
很酷的站长
2022/12/16
2.7K0
uniapp 中的交互反馈 API【提示框】
uni-app入门教程(6)接口的扩展应用
本文主要介绍了接口的扩展应用:设备相关的接口包括获取系统信息、网络状态、拨打电话、扫码等;导航栏的动态设置;下拉刷新和上拉加载更多的实现;用条件编译实现小程序、APP等多端兼容;提示框、Loading、模态弹窗等的交互反馈。
cutercorley
2021/01/05
1.5K0
uni-app入门教程(6)接口的扩展应用
学习uni-app官方教程
从hello-uniapp中复制common文件夹以及static下面的uni.ttf文件到news项目同目录下
阿超
2022/08/16
1.1K0
学习uni-app官方教程
『UniApp』核心语法
下载地址:https://www.dcloud.io/hbuilderx.html
程序员NEO
2023/12/26
7042
『UniApp』核心语法
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.5K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
uni-app实现搜索跳转功能
我们在历史记录元素添加了click事件,这个事件触发历史记录函数完成历史搜索,下文展示。
切图仔
2022/09/08
2.9K0
uni-app 开发技巧集合
在 uni-app 或者 小程序前端布局过程中,我们经常会使用一个 view 包裹一个图片组件,您会发现图片底部会产生一小块空白,如下代码 :
程序猿的栖息地
2025/07/12
1180
uni-app 开发技巧集合
uni-app请求接口跨域
服务器json数据:http://www.xxx.com/test.json(个人域名不方便展示,用xxx代替隐藏) 数据是这样的,直接可以在浏览器访问到。
王小婷
2021/07/08
4.9K0
uni-app+flask 快速开发图像识别小程序
加上踩坑一共花了3个小时左右 代码已放置github https://github.com/dmhsq/image-recognition-flask-uniapp 效果如下 手机也跑通了 但是
代码哈士奇
2021/01/26
2.5K0
uni-app+flask 快速开发图像识别小程序
uni-app下拉刷新加载刷新数据
onPullDownRefresh 监听该页面用户下拉刷新事件 需要在 pages.json 里 开启 enablePullDownRefresh
达达前端
2019/10/14
7.7K0
使用uni-app开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作:
wfaceboss
2019/04/08
5.8K1
使用uni-app开发微信小程序之登录模块
uni-app实战之社区交友APP(5)搜索和发布页开发
本文先介绍了搜索页的开发,包括页面的搭建(搜索框、搜索历史和搜索结果)和搜索逻辑的优化; 再重点介绍了发布页的开发:自定义导航栏的实现,文本输入框的实现,底部操作条图标和按钮的实现,图品上传和删除的实现以及编辑保存草稿的实现。
cutercorley
2021/02/02
2.9K0
uni-app实战之社区交友APP(5)搜索和发布页开发
如何学习uni-app?
开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台,保证其正确运行并达到优秀体验。
达达前端
2022/04/29
8190
如何学习uni-app?
uni-app实战教程-----H5移动app以及小程序(三)---页面跳转以及底部选项
新建页面 右键你的项目 点击新建页面 自己命名即可 这里为mine 建好后在 pages.json能看到 已被自动添加页面 底部选项卡 官方文档地址 https://uniapp.dclou
代码哈士奇
2021/01/29
1.6K0
uni-app 与 Vue H5 项目通讯
可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的。比如:APIcloud、uni-app等等的框架。
游魂
2020/10/26
2.4K0
uni-app 与 Vue H5 项目通讯
uni-app入门教程(4)组件的基本使用
本文主要介绍了uni-app中的组件,包括四大类:基础组件(scroll-view、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。
cutercorley
2020/12/25
4.8K0
相关推荐
uni-app点击按钮显示消息提示框-uni.showToast(OBJECT)
更多 >
LV.3
这个人很懒,什么都没有留下~
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验