j***@163.com
j***@163.com
  • 发布:2023-01-28 01:00
  • 更新:2024-03-29 10:46
  • 阅读:872

【报Bug】uni-popup 编译成支付宝小程序时,从底部弹出,异常

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 LTSC 1809 (17763.3770)

HBuilderX版本号: 3.6.18

示例代码:
<template>  
    <view>  
        <!-- 普通弹窗 -->  
        <uni-popup ref="popup">  
            <text class="text">popup 内容</text>  
        </uni-popup>  
    </view>  

    <view>  
        <button @click="open_top">顶部弹出</button>  
        <uni-popup ref="popup_top"  
            type="top">顶部弹出 Popup</uni-popup>  
    </view>  

    <view>  
        <button @click="open_bottom">底部弹出</button>  
        <uni-popup ref="popup_bottom"  
            type="bottom">底部弹出 Popup</uni-popup>  
    </view>  

    <view class="example-body box">  
        <button class="button"  
            type="primary"  
            @click="toggle('top')"><text class="button-text">顶部</text></button>  
        <button class="button"  
            type="primary"  
            @click="toggle('bottom')"><text class="button-text">底部</text></button>  
        <button class="button"  
            type="primary"  
            @click="toggle('center')"><text class="button-text">居中</text></button>  
        <button class="button"  
            type="primary"  
            @click="toggle('left')"><text class="button-text">左侧</text></button>  
        <button class="button"  
            type="primary"  
            @click="toggle('right')"><text class="button-text">右侧</text></button>  
    </view>  

</template>  

<script setup  
    lang="ts">  
    import {  
        ref,  
        onMounted  
    } from 'vue';  

    const popup = ref(null);  
    const popup_bottom = ref(null);  
    const popup_top= ref(null);  

    function toggle(type: string) {  
        popup.value.open(type);  
    }  

    function open_top(){  
        popup_top.value.open();  
    }  

    function open_bottom() {  
        popup_bottom.value.open();  
    }  

</script>  

<style>  
</style>  

操作步骤:

见如上Vue3代码部分,Vue2的代码,请从上面插件市场的地址下载

预期结果:

如前

实际结果:

如前

bug描述:

uni-popup 编译成支付宝小程序时,从底部弹出,在vue2 与vue3 下都异常:

  • 1:在Vue2下,运行插件市场中给到的示例程序,从底部弹出时,popup的内容为空,不能正常显示文字 (示例程序的路径:https://ext.dcloud.net.cn/plugin?id=329)

  • 2:在Vue3下,从底部弹出时,popup的内容一闪而过,而非正常的停靠在底部

Hbuilder的版本号详情为:3.6.18.20230117

2023-01-28 01:00 负责人:无 分享
已邀请:
a***@163.com

a***@163.com

uni-popup.vue里面有两个// #ifdef MP-WEIXIN,把第二个改成// #ifndef MP-ALIPAY就好了,没看懂,自己瞎改的,看懂的说下对不对
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-ALIPAY
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}

  • 2***@qq.com

    按照你的方法 确实是可以的,需要改一下uni-popup组件的源码,可能是开发人员粗心了

    2024-03-29 10:43

4***@qq.com

4***@qq.com

官方的bug,临时解决方案如下
popup.value.open(type);
追加
popup.value.paddingBottom = '0px'

  • j***@163.com (作者)

    直接加后面一条语句好像不太行,请问有没有什么要注意的地方?谢谢

    2023-02-09 20:42

  • l***@163.com

    回复 j***@163.com: 问一下这个问题解决了吗?我现在也遇到这个问题了

    2023-05-09 11:44

  • 4***@qq.com

    回复 l***@163.com:请问下,你们问题解决了吗

    2023-06-15 15:09

2***@qq.com

2***@qq.com - 自由开发者

需要改一下uni-popup组件的源码,可能是开发人员粗心了:uni-popup.vue里面有两个// #ifdef MP-WEIXIN,把第二个改成// #ifndef MP-ALIPAY就好了

要回复问题请先登录注册