uni-app 升级到3.2.9.20210927后 scroll-view中的popup定位错误

uni-app 升级到3.2.9.20210927后 scroll-view中的popup定位错误

开发环境 版本号 项目创建方式
Windows win 7 HBuilderX

示例代码：

<template> <view> <scroll-view id="sswiper" scroll-y="true" style="height:100vh"> <text class="example-info">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text> <uni-section title="基本示例" type="line"></uni-section> <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> 
        <uni-section title="提示消息" type="line"></uni-section>  
        <view class="example-body box">  
            <button class="button popup-success" @click="messageToggle('success')"> <text class="button-text success-text">成功</text></button>  
            <button class="button popup-error" @click="messageToggle('error')"> <text class="button-text error-text">失败</text></button>  
            <button class="button popup-warn" @click="messageToggle('warn')"> <text class="button-text warn-text">警告</text></button>  
            <button class="button popup-info" @click="messageToggle('info')"> <text class="button-text info-text">信息</text></button>  
        </view>  

        <uni-section title="对话框示例" type="line" class="hideOnPc"></uni-section>  

        <view class="example-body box">  
            <button class="button popup-success" @click="dialogToggle('success')"> <text class="button-text success-text">成功</text></button>  
            <button class="button popup-error" @click="dialogToggle('error')"> <text class="button-text error-text">失败</text></button>  
            <button class="button popup-warn" @click="dialogToggle('warn')"> <text class="button-text warn-text">警告</text></button>  
            <button class="button popup-info" @click="dialogToggle('info')"> <text class="button-text info-text">信息</text></button>  
        </view>  
        <uni-section title="输入框示例" type="line" class="hideOnPc"></uni-section>  
        <view class="example-body dialog">  
            <view class="dialog-box">  
                <text class="dialog-text">输入内容：{{ value }}</text>  
            </view>  
            <button class="button" type="primary" @click="inputDialogToggle"> <text class="button-text">输入对话框</text></button>  
        </view>  

        <uni-section title="底部分享示例" type="line" class="hideOnPc"></uni-section>  
        <view class="example-body share hideOnPc">  
            <button class="button" type="primary" @click="shareToggle"> <text class="button-text">分享模版示例</text></button>  
        </view>  

        <view>  
            <!-- 普通弹窗 -->  
            <uni-popup ref="popup" background-color="#fff" @change="change">  
                <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text class="text">popup 内容</text></view>  
            </uni-popup>  
        </view>  

        <view>  
            <!-- 提示信息弹窗 -->  
            <uni-popup ref="message" type="message"><uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message></uni-popup>  
        </view>  

        <view>  
            <!-- 提示窗示例 -->  
            <uni-popup ref="alertDialog" type="dialog">  
                <uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>  
            </uni-popup>  
        </view>  

        <view>  
            <!-- 输入框示例 -->  
            <uni-popup ref="inputDialog" type="dialog">  
                <uni-popup-dialog  
                    ref="inputClose"  
                    mode="input"  
                    title="输入内容"  
                    value="对话框预置提示内容!"  
                    :beforeClose="true"  
                    placeholder="请输入内容"  
                    @confirm="dialogInputConfirm"  
                ></uni-popup-dialog>  
            </uni-popup>  
        </view>  

        <view>  
            <!-- 分享示例 -->  
            <uni-popup ref="share" background-color="#fff" type="share"><uni-popup-share></uni-popup-share></uni-popup>  
        </view>  
        <view style="height: 300px;"></view>  
    </scroll-view>  
</view>
</template>

更多关于uni-app 升级到3.2.9.20210927后 scroll-view中的popup定位错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 升级到3.2.9.20210927后 scroll-view中的popup定位错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于uni-app 3.2.9版本中scroll-view和uni-popup组件的定位机制发生了变化导致的。当uni-popup嵌套在scroll-view内部时，弹窗的定位会基于scroll-view的滚动位置计算，而不是相对于整个视窗。

解决方案：

  1. 将uni-popup移到scroll-view外部（推荐）：

    <template>
    <view>
        <scroll-view scroll-y style="height:100vh">
            <!-- 页面内容 -->
        </scroll-view>
        
        <!-- 弹窗移到scroll-view外部 -->
        <uni-popup ref="popup">
            <!-- 弹窗内容 -->
        </uni-popup>
    </view>
</template>

  2. 如果必须放在scroll-view内部，可以尝试以下方法：

    • 使用fixed定位覆盖弹窗：
      .uni-popup {
    position: fixed !important;
    z-index: 9999;
}
    • 通过ref手动设置弹窗位置：
      this.$refs.popup.open('top', {
    position: 'fixed'
})
回到顶部