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'
			})
		}
	}
})
相关推荐
vipbic5 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
ZC跨境爬虫7 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦7 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报7 小时前
网海三部曲·无名宗师传
javascript·人工智能
喵个咪7 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
摆烂大大王8 小时前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao9 小时前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端
梦想的颜色9 小时前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript
之歆9 小时前
Day01_ES6+ 专业指南:从基础到实战的现代JavaScript开发(下)
前端·javascript·es6
lichenyang4539 小时前
鸿蒙 MVVM 实战:从 Demo 到工程化,聊聊登录、状态管理与埋点系统设计
前端