云开发接单
云开发接单
  • 发布:2022-09-26 21:36
  • 更新:2024-10-28 10:13
  • 阅读:1385

uni-popup 会在赋值新数据的适合,自动消失,只留下遮罩

分类:nvue

最新版本的uni-ui 和hbx编译器

uni-popup 会在赋值新数据的适合,自动消失,只留下遮罩

我给data的数据 test_list.push一个对象,popup弹框就消失了,只有遮罩

动态修改字符串没问题

数组动态添加一个对象就出bug了

目前测试了h5和app-nvue

app-nvue没问题,h5有问题

2022-09-26 21:36 负责人:无 分享
已邀请:
y***@163.com

y***@163.com

我这里实测是发现如果 uni-popup 组件紧挨着上面的一个组件,上面的组件由于数据变动发生了变化,就会导致紧挨着的下面的 uni-popup 组件出现这种内容消失,只剩遮罩层的问题。

实在是太奇葩了。

重现方法,注意看下面的代码 uni-popup 紧挨着上面的 view,页面加载后立即弹出 uni-popup,两秒后上面的 view 可见性发生了变化,然后 uni-popup 就出现了这个问题:

<template>  
    <view>  
        <view class="i-will-change" v-if="somethingDisplay">Yes</view>  
        <uni-popup ref="myPopup">Hello World</uni-popup>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                somethingDisplay: false  
            };  
        },  
        onLoad() {  
            this.$nextTick(() => {  
                this.$refs.myPopup.open();  
                setTimeout(() => {  
                    this.somethingDisplay = true;  
                }, 2000);  
            });  
        }  
    };  
</script>

解决的办法也很简单,就是 uni-popup 不要挨着会变化的元素,比如把 view.i-will-change 再套进一个 view 里就行了。

这个问题实在是太太奇葩了。

  • anlogo

    重现了这个问题,并且按照你的做法解决了问题,谢谢

    2023-08-24 11:58

  • 2***@qq.com

    这 bug属实牛逼, 只要更新的dom不要和弹窗平级就可以了

    2023-11-09 13:32

云开发接单

云开发接单 (作者) - 专攻云开发,有云开发的小单子可找我

有些参数又不会,不是是不是因为布局动态调整比较厉害,导致丢失的

云开发接单

云开发接单 (作者) - 专攻云开发,有云开发的小单子可找我

添加数据之后,弹框内容不见,但是里面的mask还在

  • 酷酷_

    请问您解决了吗

    2024-07-12 08:11

云开发接单

云开发接单 (作者) - 专攻云开发,有云开发的小单子可找我

push数据之后,会变成transform:translateY(100%)
把弹框的内容全部移到屏幕外面去了
这是什么原因?

  • 酷酷_

    解决了吗?

    2024-07-12 08:11

CODE_XU

CODE_XU

可以提供一个最简单的复现demo吗?你说的这种情况未能复现。

  • 云开发接单 (作者)

    重启电脑又好了,真是奇怪

    2022-09-27 17:27

z***@163.com

z***@163.com

我这边也有这个问题,最后自己重写的弹框

  • z***@163.com

    和楼主的问题一模一样

    2022-12-01 10:10

  • z***@163.com

    原因是因为在scroll-view标签内使用了包含uni-popup的自定义组件,当自定义组件uni-popup内出现滑动和数据变动的时候,content内容会被uni赋值transform:translateY(100%),只展示mask蒙层。


    要么自己写,要么把页面布局改一下。

    2022-12-01 11:23

1***@163.com

1***@163.com

问题发生在 uni-transition组件的open方法里边,把transfrom的初始赋值给移除掉就没这问题了。不确定会不会有其他问题,还没碰到

3***@qq.com

3***@qq.com

我根据源码翻找了下,根本原因是框架使用的 createAnimation 会直接修改标签的 style 样式,
这会导致:style 单向绑定无法及时更新数据,
当你更新了相关数据后,会调用刷新参数,又将 style 绑定的数据重新刷新到标签了(默认隐藏的状态)
查看代码后发现,createAnimation 实例对象的run方法,支持在动画结束后调用方法,
于是修改了下源码(本人没有涉猎app等多环境,仅保证h5可用, 如有需要自己根据环境修改)


在run 方法回调中,将 createAnimation 修改后的style的参数赋值
(伪装双向绑定,让更新数据时候,获取到的是修改后的值)

要回复问题请先登录注册