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'
			})
		}
	}
})
相关推荐
一枚前端小能手几秒前
🔧 半夜被Bug叫醒的痛苦,错误监控帮你早发现
前端
Juchecar2 分钟前
Vue 3 单页应用Router路由跳转示例
前端
这人是玩数学的4 分钟前
在 Cursor 中规范化生成 UI 稿实践
前端·ai编程·cursor
UncleKyrie5 分钟前
🎨 市面上主流 Figma to Code MCP 对比
前端
李明卫杭州7 分钟前
CSS `clamp()` 函数详解
javascript
奶丝兔蜜柚12 分钟前
栈溢出优化
javascript
南半球与北海道#18 分钟前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图
然我25 分钟前
React 16.8:不止 Hooks 那么简单,这才是真正的划时代更新 🚀
前端·react.js·前端框架
小高00738 分钟前
📈前端图片压缩实战:体积直降 80%,LCP 提升 2 倍
前端·javascript·面试
OEC小胖胖41 分钟前
【React Hooks】封装的艺术:如何编写高质量的 React 自-定义 Hooks
前端·react.js·前端框架·web