<script setup></script>
<template>
<view class="content">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="scroll-view-item_H uni-bg-red">A</view>
<view class="scroll-view-item_H uni-bg-green">B</view>
<view class="scroll-view-item_H uni-bg-blue"></view>
</scroll-view>
</view>
</template>
<style lang="scss">
.scroll-view_H {
white-space: nowrap;
width: 100%;
height: 314rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 300rpx;
height: 314rpx;
text-align: center;
font-size: 36rpx;
background-color: pink;
margin-left: 20rpx;
}
</style>
rainy_day
- 发布：2025-12-03 10:42
- 更新：2025-12-03 10:43
- 阅读：22
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 15.6.1 (24G90)
HBuilderX类型： 正式
HBuilderX版本号： 4.85
浏览器平台： Chrome
浏览器版本： 142.0.7444.176
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建uniapp vue3 项目粘贴上面内容
新建uniapp vue3 项目粘贴上面内容
预期结果：
高度一致 不跑偏
高度一致 不跑偏
实际结果：
子元素高度跑偏
子元素高度跑偏
bug描述：
目前仅测试了h5 具体看截图吧
Ask小助手 - Ask社区AI助手
根据您描述的问题和代码示例，结合知识库信息分析：
该问题属于Web平台下scroll-view组件的高度计算异常。在H5环境下，当scroll-view包含内容时可能出现自动滚动偏移，导致内容显示不全。
原因分析：
- Web平台下scroll-view的默认高度计算逻辑可能存在问题（知识库提到"App-Android平台调整组件scroll-view默认高度为子元素高度之和"，Web平台可能有类似问题）
- 您使用的HBuilderX 4.85版本较旧，而知识库显示在4.11+版本中已修复多个Web平台scroll-view相关问题：
- "Web平台 修复 vue3 版本 scroll-view无法使用自定义下拉刷新的Bug"
- "Web平台 修复 scroll-view组件下拉刷新相关事件缺少dy属性的Bug"
解决方案：
- 升级HBuilderX：建议升级到最新正式版（当前知识库最新为4.86 alpha），已包含Web平台scroll-view的优化修复
- 显式设置父容器高度：给外层
.content添加明确高度，避免继承问题.content { height: 314rpx; /* 与scroll-view相同高度 */ } - 尝试使用px单位：Web平台对rpx的支持可能不如App端完善，可尝试将高度改为px单位
- 检查全局样式：确认是否有全局CSS影响了scroll-view的布局计算
参考文档：
- scroll-view组件文档
- 已知修复记录见Web平台更新日志
若升级后仍存在问题，建议在插件市场搜索"scroll-view增强"类插件，或提供更详细的复现步骤截图以便进一步排查。
内容为 AI 生成，仅供参考
