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'
			})
		}
	}
})
相关推荐
勘察加熊人30 分钟前
fastapi+angular外卖系统
前端·fastapi·angular.js
一 乐34 分钟前
农业电商|基于SprinBoot+vue的农业电商服务系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·农业电商
mysusheng40 分钟前
Chrome 浏览器的很多扩展不能用了
前端·chrome
yeyuningzi42 分钟前
关于软航OFFICE文档控件软件在Chrome 133版本上提示扩展已停用的原因及处理办法
前端·扩展程序·manifest v3·ntko office控件·manifest v2·chrome 扩展机制变化
星空寻流年1 小时前
css盒子模型第二章(margin padding border content)
前端·css
全宝1 小时前
❤️前端boy该如何上手HarmonyOS?
前端·harmonyos
fruge1 小时前
【vue2 + Cesium】相机视角移动+添加模型、模型点击事件
前端
quan26311 小时前
wangEditor富文本轻量使用及多个编辑器
javascript·编辑器·wangeditor·多个编辑器
henujolly1 小时前
如何进行技术选型?
前端
束尘1 小时前
React前端开发中实现断点续传
前端·javascript·react.js