uni-app scroll-view 在子元素内容不一致时候子元素高度错乱

uni-app scroll-view 在子元素内容不一致时候子元素高度错乱

开发环境 版本号 项目创建方式
Mac 15.6.1 HBuilderX

示例代码：

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

操作步骤：

  • 新建uniapp vue3 项目粘贴上面内容

预期结果：

  • 高度一致 样式不错乱

实际结果：

  • 子元素高度跑偏

bug描述：

  • 目前仅测试了h5 具体看截图吧

Image Image Image


更多关于uni-app scroll-view 在子元素内容不一致时候子元素高度错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

根据您描述的问题和代码示例，结合知识库信息分析：
该问题属于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 生成，仅供参考

更多关于uni-app scroll-view 在子元素内容不一致时候子元素高度错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


子元素的样式应当使用下面 css，确保基线是对齐的，不是 uniapp 的错误导致的。
display: inline-block;
vertical-align: top;

这个问题是由于 scroll-view 横向滚动时，子元素设置了 display: inline-block 且内容高度不一致导致的布局错乱。

解决方案：

  1. 为所有子元素添加 vertical-align: top 属性：
.scroll-view-item_H {
    display: inline-block;
    vertical-align: top;  /* 关键修复 */
    width: 300rpx;
    height: 314rpx;
    text-align: center;
    font-size: 36rpx;
    background-color: pink;
    margin-left: 20rpx;
}
  1. 或者使用 Flex 布局替代 inline-block：
.scroll-view_H {
    display: flex;  /* 改用flex布局 */
    flex-direction: row;
    width: 100%;
    height: 314rpx;
}

.scroll-view-item_H {
    flex-shrink: 0;  /* 防止压缩 */
    width: 300rpx;
    height: 314rpx;
    text-align: center;
    font-size: 36rpx;
    background-color: pink;
    margin-left: 20rpx;
}
回到顶部