uni-app:实现等待加载功能

例子

下例是实现蓝牙连接的部分代码,先进行加载连接显示,在进行连接,连接成功/失败,都自动关闭加载效果

效果

核心

开始的加载效果:

javascript 复制代码
uni.showLoading({
	title: '正在连接,请稍候...',
	mask: true,
});

关闭加载效果

javascript 复制代码
uni.hideLoading(); // 连接成功后隐藏加载提示

代码

javascript 复制代码
this.deviceId = deviceId,
	uni.showLoading({
		title: '正在连接,请稍候...',
		mask: true,
	});

//连接蓝牙
uni.createBLEConnection({
	// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
	deviceId: this.deviceId,
	success(res) {
		console.log(res)
		console.log("蓝牙连接成功")
		uni.hideLoading(); // 连接成功后隐藏加载提示
		uni.showToast({
			title: '连接成功',
		})
	},
	fail(res) {
		console.log("蓝牙连接失败", res)
		uni.hideLoading(); // 连接成功后隐藏加载提示
		if (res.errMsg == 'createBLEConnection:fail already connect') {
			uni.showToast({
				title: '已有连接设备',
				icon: 'none'
			})
		}
	}
})
相关推荐
倾颜11 小时前
从 textarea 到 AI 输入框:用 Tiptap 实现 / 命令、@ 引用和结构化请求
前端·langchain·next.js
kyriewen12 小时前
程序员连夜带团队跑路,省了23万:这AI太贵,真的用不起了
前端·javascript·openai
kyriewen13 小时前
你写的代码没有测试,就像出门不锁门——Jest + Testing Library 从入门到不慌
前端·单元测试·jest
yuzhiboyouye14 小时前
web前端英语面试
前端·面试·状态模式
canonical_entropy15 小时前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月15 小时前
5分钟搞懂Harness Engineering(驾驭工程):从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅15 小时前
为什么需要 @types/react?解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆15 小时前
DAY_21JavaScript 深度解析:数组(Array)与函数(Function)(一)
前端·javascript
XinZong16 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee16 小时前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php