- 发布：2021-09-29 11:43
- 更新：2024-11-19 14:38
- 阅读：2268
【报Bug】scroll-view内部子组件包含的uni-popup、uni-drawer等子组件，会被scroll-view区域包裹，仅能在scroll-view区域内显示
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.9
手机系统： 全部
手机厂商： 华为
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<view class="container">
<view class="panel-item">
</view>
<view class="panel-item">
<scroll-view scroll-y="true" style="height: 100%;">
<view class="scroll-body">
<text>scroll-view区域</text>
<uni-popup ref="pop-body">
<view class="pop-body">uni-pop</view>
</uni-popup>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
mounted() {
this.$refs['pop-body'].open()
}
}
</script>
<style lang="scss">
.container {
width: 100vw;
height: 100vh;
background-color: skyblue;
display: flex;
.panel-item {
width: 40%;
margin: 0 10%;
height: 100%;
background-color: #1AAD19;
.scroll-body {
width: 100%;
height: 100%;
background-color: #BE926E;
}
}
}
.pop-body {
width: 100px;
height: 100px;
background-color: #36FF00;
}
</style>
<template>
<view class="container">
<view class="panel-item">
</view>
<view class="panel-item">
<scroll-view scroll-y="true" style="height: 100%;">
<view class="scroll-body">
<text>scroll-view区域</text>
<uni-popup ref="pop-body">
<view class="pop-body">uni-pop</view>
</uni-popup>
</view>
</scroll-view>
</view>
</view> </template>
<script>
export default {
mounted() {
this.$refs['pop-body'].open()
}
} </script>
<style lang="scss">
.container {
width: 100vw;
height: 100vh;
background-color: skyblue;
display: flex;
.panel-item {
width: 40%;
margin: 0 10%;
height: 100%;
background-color: #1AAD19;
.scroll-body {
width: 100%;
height: 100%;
background-color: #BE926E;
}
}
}
.pop-body {
width: 100px;
height: 100px;
background-color: #36FF00;
} </style>
操作步骤：
scroll-view组件内部写个uni-popup、uni-drawer子组件
scroll-view组件内部写个uni-popup、uni-drawer子组件
预期结果：
popup能在页面中居中显示
popup能在页面中居中显示
实际结果：
目前仅能在scroll-view区域居中显示
目前仅能在scroll-view区域居中显示
bug描述：
若scroll-view子组件包含的uni-popup、uni-drawer等子组件，会被scroll-view区域包裹，仅能在scroll-view区域内显示。查看3.2.9版本代码变更记录 发现uni-scroll-view-content节点css有transform等属性造成的影响
在<scroll-view>
< uni-swipe-action-item>
<warehouseCell></warehouseCell>在这里面调用popup
</ uni-swipe-action-item>
</scroll-view>
这种又拉胯了,嘿嘿
dez (作者)
实际上 并非直接将uni-popup等直接放scroll-view中，是scroll-view中需要用到一些公共的组件，比如会员信息等组件，然后信息组件可能需要查看详情等操作，需要用到uni-popup。这个uni-popup是放到会员登录信息组件里去实现，作为会员信息组件的一部分。不好提取到第一个根节点
2021-09-29 13:35
赵日天11111
什么时候修复了，这么多年不都这样吗，，，2023年都快结束了，这个问题依旧是存在的，，苹果手机微信小程序上面就有
2023-12-13 09:29
困难总比办法多
1008611
2024-03-28 17:44
4***@qq.com
那倒是修复啊，亲
2024-09-06 15:54
4***@qq.com
回复 dez: 你好，请问您这个最后怎么解决的呢？
2024-09-09 18:13
2***@qq.com
这个问题值得被修复，ios 上的 app 上有严重的问题，uni-popup 无法遮挡 scroll-view 里面的内容，~-~
2024-11-01 21:30