烫了个发

发布：2022-01-14 20:00
更新：2022-01-15 11:11
阅读：535

【报Bug】Vue3下Android打包正式版App后，scroll-view高度失效，整个页面都滚动起来了。

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 11.6

HBuilderX类型：正式

HBuilderX版本号： 3.3.5

手机系统： Android

手机系统版本号： Android 10

手机厂商： vivo

手机机型： vivo x27

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="body">  
        <view class="nav-tab">123</view>  
        <view class="container">  
            <view class="sub-container">  
                <scroll-view scroll-y class="custom-scroll-view">  
                    <view v-for="item of 1000 " class="item" :key="item">{{ item }}</view>  
                </scroll-view>  
            </view>  
        </view>  
    </view>  
</template>  
<style>  
.body {  
    height: 100vh;  
}  

.nav-tab {  
    height: 100px;  
    background-color: red;  
}  

.container {  
    height: calc(100vh - 50px);  
    display: flex;  
    flex-flow: column nowrap;  
}  

.sub-container {  
    flex: 1;  
    position: relative;  
}  

.custom-scroll-view {  
    position: absolute;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    top: 0;  
}  

.item {  
    height: 50px;  
    border-bottom: 1px solid #ccc;  
}  
</style>

// page.json  

    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8",  
        "titleNView": false,  
        "contentAdjust": "false",  
        "bounce": "none",  
        "safearea": {  
            "bottom": {  
                "offset": "none"  
            }  
        }  
    }

操作步骤：

Vue3正式打包后scroll-view高度失效。

预期结果：

scroll-view高度正常

实际结果：

scroll-view高度溢出，被内部元素撑开，整个页面都开始滚动。

bug描述：

使用Vue3开发项目，开发环境自定义基座调试时所有手机表现正常，正式打包后scroll-view设置的高度失效，整个页面被列表内元素撑开并滚动起来了。

正式打包后只有Pixel 3 XL (Android 12)表现正常，手头的其他安卓手机scroll-view高度都失效了，包含vivo x27、Redmi 6、以及几台oppo手机。

写了个DEMO页面测试了一下，只有Vue3正式打包后有这个问题，Vue2正式打包后没有这个问题。

2022-01-14 20:00 负责人:无分享

1 个回复

DCloud_UNI_LXH

不太清楚你描述的是什么意思。

整个页面被列表内元素撑开是什么意思？可否提供一个视频说明之类的。

运行了你的示例：
.nav-tab height:100px;
.container height: calc(100vh - 50px);
页面肯定会被撑高 50px 。

你可以尝试给 .custom-scroll-view 设置一个固定的高度看看表现如何

该问题目前已经被锁定, 无法添加新回复

【报Bug】Vue3下Android打包正式版App后，scroll-view高度失效，整个页面都滚动起来了。

操作步骤：

Vue3正式打包后scroll-view高度失效。

预期结果：

scroll-view高度正常

实际结果：

scroll-view高度溢出，被内部元素撑开，整个页面都开始滚动。

bug描述：

1 个回复

公告

相关问题

【报Bug】Vue3下Android打包正式版App后，scroll-view高度失效，整个页面都滚动起来了。

操作步骤： Vue3正式打包后scroll-view高度失效。

预期结果： scroll-view高度正常

实际结果： scroll-view高度溢出，被内部元素撑开，整个页面都开始滚动。

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

Vue3正式打包后scroll-view高度失效。

预期结果：

scroll-view高度正常

实际结果：

scroll-view高度溢出，被内部元素撑开，整个页面都开始滚动。