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

uni-app中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描述：

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


更多关于uni-app中uni.showLoading的mask在支付宝小程序上无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

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

更多关于uni-app中uni.showLoading的mask在支付宝小程序上无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我在使用下列示例代码并在基础库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压缩包上传

文档显示有兼容性 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;
}

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

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

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

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

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

在 uni-app 中使用 uni.showLoading 时，mask 参数用于控制是否显示遮罩层，防止用户点击页面其他区域。然而，在支付宝小程序中，mask 参数可能无效，这是由于支付宝小程序的底层实现与微信小程序等平台有所不同。

解决方案

  1. 检查支付宝小程序的兼容性
    首先，确保你使用的 uni-app 版本支持支付宝小程序的 mask 参数。如果 uni-app 版本较旧，可能需要升级到最新版本。

  2. 使用自定义遮罩层
    如果 mask 参数在支付宝小程序上确实无效，可以通过自定义遮罩层来实现类似的效果。例如：

    <template>
  <view>
    <button @click="showLoading">显示加载</button>
    <view v-if="loading" class="mask"></view>
    <view v-if="loading" class="loading">加载中...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    showLoading() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000); // 模拟加载2秒
    }
  }
};
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 1000;
}
</style>

  3. 使用支付宝小程序的原生 API
    如果 uni.showLoading 在支付宝小程序上无法满足需求，可以尝试使用支付宝小程序的原生 API my.showLoading，它可能提供更好的兼容性。

    my.showLoading({
  content: '加载中...',
  delay: 0,
  mask: true
});
回到顶部