亿企查
亿企查
  • 发布:2025-09-16 18:44
  • 更新:2025-09-16 21:09
  • 阅读:29

【报Bug】scroll-view 循环加载组件 组件中包含多个view 和 uni-popup 此时弹框只能在scroll-view可视范围内显示

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11专业版 24H2

HBuilderX类型: 正式

HBuilderX版本号: 4.75

手机系统: iOS

手机系统版本号: iOS 18

手机厂商: 苹果

手机机型: 11

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view>
<view class="zh-wrapper">
<scroll-view scroll-y style="width: 250rpx;height: 100%;touch-action:none;">
</scroll-view>
<scroll-view scroll-y style="flex: 1;height: 100%;overflow: hidden;background-color: #ffffff;">
<view v-for="(item,index) in list">
<comter></comter>
</view>
</scroll-view>
</view>
</view>
</template>

<script>
import comter from './comter.vue'
export default {
data() {
return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
components: {
comter
}
}
</script>

<template>
<view>
<view @click="$refs.explainPopup.open()"> 11111111</view>
<view @click="$refs.explainPopup.open()"> 11111111</view>
<view @click="$refs.explainPopup.open()"> 11111111</view>
<view @click="$refs.explainPopup.open()"> 11111111</view>
<view @click="$refs.explainPopup.open()"> 11111111</view>
<uni-popup ref="explainPopup" type="center">
<view class="anstistop">
<image class="antistop_title_image" src="/static/app/model/top_banner.png"></image>
<view class="antistop_title_div">
<text class="antistop_title">
提示
</text>
</view>
<view class="antistop_center">
<text class="antistop_center_text">
{{12121212121212121}}
</text>
</view>

            <view class="p-btn" @click="close">  
                <text class="new_antistop_bottom">我知道了</text>  
            </view>  
        </view>  
    </uni-popup>  
</view>  

</template>

<script>
</script>

<style>
.anstistop {
width: 286px;
padding-bottom: 1px;
background-color: white;
border-radius: 8px;
}

.antistop_title_div {  
    border-radius: 8px;  
    position: relative;  
    justify-content: center;  
    display: flex;  
    flex-direction: row;  
}  

.antistop_title {  
    padding: 20px 0 9px 0;  
    text-align: center;  
    font-size: 16px;  
    font-family: PingFangSC-Medium, PingFang SC;  
    font-weight: 600;  
    color: #283040;  
}  

.antistop_title_image {  
    position: absolute;  
    width: 286px;  
    height: 98rpx;  
    left: 0;  

}  

.antistop_center {  
    /* #ifndef APP-NVUE */  
    max-height: 335px;  
    /* #endif */  
    width: 286px;  
    padding: 0rpx 28rpx 24rpx 28rpx;  
    /* margin-bottom: 24rpx; */  
}  

.scroll_h {  
    height: 335px;  
}  

.antistop_center_header {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    margin-top: 12px;  
}  

.antistop_center_header_left {  
    width: 4px;  
    height: 15px;  
    border-radius: 10px;  
    background: #1677FF;  
    margin-right: 6px;  
}  

.antistop_center_header_text {  
    font-size: 14px;  
    font-family: PingFangSC-Medium, PingFang SC;  
    font-weight: 600;  
    color: #283040;  
}  

.antistop_center_text_div {  
    width: 258px;  
}  

.antistop_center_text {  
    /* width: 258px; */  
    margin-top: 8px;  
    font-size: 14px;  
    font-family: PingFangSC-Regular, PingFang SC;  
    font-weight: 400;  
    color: #4C5567;  
    text-align: left !important;  
}  

.p-btn {  
    width: 246px;  
    height: 42px;  
    background: #1778FF;  
    border-radius: 4px;  
    margin: 20px;  
    justify-content: center;  
    display: flex;  
    flex-direction: row;  
}  

.new_antistop_bottom {  
    font-size: 16px;  
    font-family: PingFangSC-Regular, PingFang SC;  
    font-weight: 400;  
    color: #FFFFFF;  
    text-align: center;  
    line-height: 42px;  
}  

</style>

操作步骤:

点击view后弹框

预期结果:

正常全屏弹框

实际结果:

仅在scroll-view可视范围内显示

bug描述:

scroll-view 循环加载组件 组件中包含多个view 和 uni-popup 此时弹框有问题,当组件内只有一个view和uni-popup时弹框正常,仅iOS环境,Android、鸿蒙、H5正常

2025-09-16 18:44 负责人:DCloud_UNI_OttoJi 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

可以把uni-popup放到父级页面中
comter组件内点击后触发自定义事件
父级页面监听并打开uni-popup组件
这样就不会被包裹在scroll-view中了

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

这个问题的确奇怪,相同的产物在 ios 上表现不一致,目前看到 ios 中 overflow-y 的表现比较特殊,你给你的 right scroll-view 添加一个 right-view 的 class name

  .right-view > .uni-scroll-view > .uni-scroll-view {  
    /* #ifdef APP-PLUS */  
    overflow-x: auto!important;  
    overflow-y: hidden!important  
    /* #endif */  
  }

要回复问题请先登录注册