2***@qq.com

发布：2024-01-16 10:55
更新：2024-05-15 11:20
阅读：518

【报Bug】uni.showLoading中的mask在支付宝小程序上无效

分类：uni-app

bug反馈

产品分类： uniapp/小程序/阿里

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 22621.2861

HBuilderX类型：正式

HBuilderX版本号： 3.99

第三方开发者工具版本号： 3.8.4

基础库版本号： 2.8.15

项目创建方式： HBuilderX

示例代码：

/** 裁剪图片 */  
      async postCertInit() {  
        try {  
          uni.showLoading({  
            title: '生成预览中...',  
            mask: true,  
          })  
          const res = await postCertInitApi(this.postCertInitParams)  
          uni.hideLoading()  
        } catch (error) {  
          console.log('error  ===>  ', error)  
          return Promise.reject(error)  
        }  
      }

操作步骤：

希望在获取数据时打开loading并且显示透明蒙层，防止触摸穿透

预期结果：

希望在展示loading时显示透明蒙层，防止触摸穿透

实际结果：

实际上只有透明蒙层，但是无法防止触摸穿透，用户仍然可以触摸穿透点击蒙层下的部分

bug描述：

uni.showLoading中的mask在支付宝小程序上无效

2024-01-16 10:55 负责人:无分享

4 个回复

HRK_01

感谢你的反馈，我将负责验证尝试复现该问题，后续有进展会在此贴回复

HRK_01

我在使用下列示例代码并在基础库2.8.15版本下真机调试/开发者工具未能复现该问题，请提供更多上下文

<template>  
    <view class="container">  
        <text class="intro">详见：</text>  
        <uni-file-picker fileMediatype="image" :image-styles="imageStyles" />  
        <button @click="onclick">你好</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                text: '示例',  
            }  
        },  
        methods: {  
            onInput(e) {  
                console.log(e)  
            },  
            onclick() {  
                console.log("click");  
            },  
        },  
        onLoad() {  
            // this.$refs.tooltip.initPlacement = this.text;  
            uni.showLoading({  
                title: '生成预览中...',  
                mask: true,  
            })  
        }  
    }  
</script>

是否能提供一个简单复现问题的demo（zip压缩包上传

喜欢技术的前端 - QQ---445849201

文档显示有兼容性

mask    Boolean 否   是否显示透明蒙层，防止触摸穿透，默认：false    H5、App、微信小程序、百度小程序、抖音小程序（2.47.0+）

我自己定义的view 进行遮挡

.mask{  
        position: fixed;  
        background-color: rgba(0, 0, 0, 0);  
        top: 0;  
        left: 0;  
        z-index: 998;  
        width: 750rpx;  
        height: 100vh;  
    }

HRK_01

你在测试支付宝时mask也会复现该问题吗

2024-01-16 15:32
喜欢技术的前端

回复 HRK_01: 刚开发工具3.7.x mask：true 挡不住，升级了3.8.4，没问题了

2024-01-16 16:04
HRK_01

回复喜欢技术的前端: 好的，感谢反馈

2024-01-16 16:21

1***@qq.com

微信小程序也没用用。微信开发者工具里面是有效的，但是到真机里面运行无效，可以重复点击后面的按钮。

2***@qq.com (作者)

重复点击后面的按钮是什么意思

2024-05-20 15:00

要回复问题请先登录或注册

【报Bug】uni.showLoading中的mask在支付宝小程序上无效

示例代码：

`/** 裁剪图片 */ async postCertInit() { try { uni.showLoading({ title: '生成预览中...', mask: true, }) const res = await postCertInitApi(this.postCertInitParams) uni.hideLoading() } catch (error) { console.log('error ===> ', error) return Promise.reject(error) } }`

操作步骤：

希望在获取数据时打开loading并且显示透明蒙层，防止触摸穿透

预期结果：

希望在展示loading时显示透明蒙层，防止触摸穿透

实际结果：

实际上只有透明蒙层，但是无法防止触摸穿透，用户仍然可以触摸穿透点击蒙层下的部分

bug描述：

4 个回复

公告

相关问题

【报Bug】uni.showLoading中的mask在支付宝小程序上无效

示例代码： /** 裁剪图片 */ async postCertInit() { try { uni.showLoading({ title: '生成预览中...', mask: true, }) const res = await postCertInitApi(this.postCertInitParams) uni.hideLoading() } catch (error) { console.log('error ===> ', error) return Promise.reject(error) } }

操作步骤： 希望在获取数据时打开loading并且显示透明蒙层，防止触摸穿透

预期结果： 希望在展示loading时显示透明蒙层，防止触摸穿透

实际结果： 实际上只有透明蒙层，但是无法防止触摸穿透，用户仍然可以触摸穿透点击蒙层下的部分

bug描述：

与内容相关的链接

4 个回复

公告

相关问题

示例代码：

`/** 裁剪图片 */ async postCertInit() { try { uni.showLoading({ title: '生成预览中...', mask: true, }) const res = await postCertInitApi(this.postCertInitParams) uni.hideLoading() } catch (error) { console.log('error ===> ', error) return Promise.reject(error) } }`

操作步骤：

希望在获取数据时打开loading并且显示透明蒙层，防止触摸穿透

预期结果：

希望在展示loading时显示透明蒙层，防止触摸穿透

实际结果：

实际上只有透明蒙层，但是无法防止触摸穿透，用户仍然可以触摸穿透点击蒙层下的部分