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

灰太狼 2022-10-12 15:47 33阅读 0赞

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

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

一些参数说明：  
![4d9e68362c612cbcf7884d38ecf37a2a.png][]

test.vue例子

<template>
    	<button @click.stop="isLeave()">点击按钮</button>
    </template>
    <script>
    	export default {
    		data() {
    			return {};
    		},
    		onLoad() {},
    		methods: {
    			isLeave(id) {
    				uni.showLoading({
    				    title: '加载中'
    				});
    			},
    		},
    	}
    </script>
    <style>
    
    </style>

![5bbc5fd562e9b959431e11e28ffb8ab0.png][]

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

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[uni.hideLoading]: https://uniapp.dcloud.io/api/ui/prompt?id=hideloading
[4d9e68362c612cbcf7884d38ecf37a2a.png]: /images/20221005/544c9d5bbc504daea2dc3277cad7bc4a.png
[5bbc5fd562e9b959431e11e28ffb8ab0.png]: /images/20221005/c1e2f32db0f54d1da02eb3b9f9f3dc6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/77121a5b43494f5e815d4b63aeef9bb9.png