uni-app 3.2.10版本 list 内 header 组件显示异常

uni-app 3.2.10版本 list 内 header 组件显示异常

示例代码：

<template>  
  <list class="list">  
    <header class="header"></header>  
  </list>  
</template>  

<script src="./index.js"></script>  

<style lang="scss" scoped>  
.list {  
  background-color: pink;  
}  

.header {  
  width: 750rpx;  
  height: 100rpx;  
  background-color: bisque;  
}  
</style>

操作步骤：

模拟器运行即可

预期结果：

显示正常

实际结果：

显示多了一块

bug描述：

使用的时候header顶部多了一块

f0fa89420eb3d2d9a2711a9835cf15d0

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC系统版本 macOS Big Sur 11.6
开发工具 HBuilderX
工具版本 3.2.10
手机系统 iOS
手机系统版本 IOS 14
手机厂商 模拟器
手机机型 iPhone 13
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 3.2.10版本 list 内 header 组件显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

此设备在旧版是否正常？ 此版本使用其他设备是否正常？

更多关于uni-app 3.2.10版本 list 内 header 组件显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


3.2.9正常的，安卓没测

问题复现，已反馈给相关组排查，已加分，感谢您的反馈！

HX3.2.11+ 版本已修复此问题

这是一个已知的nvue页面中list组件header的渲染问题。在uni-app 3.2.10版本中，nvue的list组件header默认会添加一个额外的顶部内边距，导致显示异常。

解决方案：

在header组件上添加refresh属性，设置为false即可：

<template>  
  <list class="list">  
    <header class="header" refresh="false"></header>  
  </list>  
</template>
回到顶部