uni-app nvue list 样式错乱

uni-app nvue list 样式错乱

开发环境 版本号 项目创建方式
Windows w10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
3.7.11

手机系统：
iOS

手机系统版本号：
iOS 16

手机厂商：
苹果

手机机型：
iphone8

页面类型：
vue

vue版本：
vue2

打包方式：
云端

示例代码：

nvue list  样式错乱

操作步骤：

nvue list  样式错乱

预期结果：

nvue list  样式错乱

实际结果：

nvue list  样式错乱

bug描述：

nvue list  样式错乱


更多关于uni-app nvue list 样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以把列表做成组件，加上key,试试

更多关于uni-app nvue list 样式错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的信息，nvue页面中list样式出现错乱问题，可能是由于以下原因导致的：

  1. nvue的样式支持与vue页面有所不同，部分CSS属性在nvue中不支持或表现不一致
  2. 在iOS平台上，list组件可能需要特殊处理才能正确渲染

建议检查以下几点：

  1. 确保使用了flex布局，nvue主要依赖flex进行布局
  2. 检查是否使用了nvue不支持的CSS属性
  3. 尝试给list-item添加固定高度，避免动态计算导致布局问题
  4. 检查图片资源是否加载正常，图片尺寸是否合适

可以尝试修改样式为：

.list-item {
  flex-direction: row;
  align-items: center;
  height: 100px; /* 固定高度 */
}
回到顶部