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

待我称王封你为后i 2022-10-11 10:57 290阅读 0赞

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

参考文档[https://uniapp.dcloud.io/api/ui/prompt?id=showmodal][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>

[uni.hideLoading]: https://links.jianshu.com/go?to=https%3A%2F%2Funiapp.dcloud.io%2Fapi%2Fui%2Fprompt%3Fid%3Dhideloading
[https_uniapp.dcloud.io_api_ui_prompt_id_showmodal]: https://links.jianshu.com/go?to=https%3A%2F%2Funiapp.dcloud.io%2Fapi%2Fui%2Fprompt%3Fid%3Dshowmodal
[4d9e68362c612cbcf7884d38ecf37a2a.png]: /images/20221005/82c862f08d5f4e8e8f5358ee0da0cc47.png
[5bbc5fd562e9b959431e11e28ffb8ab0.png]: /images/20221005/cd52a1b40e864f30b1e4a5e1cd77d867.png