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
更多关于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 设置一个固定的高度看看表现如何

