uni-app Vue3下Android打包正式版App后 scroll-view高度失效 整个页面都滚动起来了

uni-app Vue3下Android打包正式版App后 scroll-view高度失效 整个页面都滚动起来了

项目 内容
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.6
HBuilderX类型 正式
HBuilderX版本号 3.3.5
手机系统 Android
手机系统版本号 Android 10
手机厂商 vivo
手机机型 vivo x27
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

bug描述:

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

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

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

示例代码:

<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"  
            }  
        }  
    }

更多关于uni-app Vue3下Android打包正式版App后 scroll-view高度失效 整个页面都滚动起来了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app Vue3下Android打包正式版App后 scroll-view高度失效 整个页面都滚动起来了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不太清楚你描述的是什么意思。
整个页面被列表内元素撑开是什么意思?可否提供一个视频说明之类的。
运行了你的示例: .nav-tab height:100px; .container height: calc(100vh - 50px); 页面肯定会被撑高 50px 。
你可以尝试给 .custom-scroll-view 设置一个固定的高度看看表现如何

回到顶部