uni-app subNvue 使用list组件渲染没有圆角

在uni-app中，使用subNvue页面的list组件渲染列表时，如果列表项没有显示圆角，通常是因为样式没有正确应用。你可以通过CSS样式来控制list组件内元素的圆角。以下是一个简单的示例，展示如何在subNvue页面中应用圆角样式到list组件的每一项。

首先，确保你的项目已经正确配置了subNvue页面。假设你已经在pages.json中配置了subNvue页面，并且已经创建了一个包含list组件的subNvue页面文件，例如subNvuePage.nvue。

subNvuePage.nvue

<template>
  <div>
    <list :scroll-y="true" style="height: 100vh;">
      <list-header>
        <text>列表标题</text>
      </list-header>
      <list-item v-for="(item, index) in items" :key="index" class="list-item">
        <div class="item-content">
          <text>{{ item.name }}</text>
        </div>
      </list-item>
    </list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
        // 更多项...
      ]
    };
  }
};
</script>

<style scoped>
.list-item {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  border-radius: 10px; /* 设置圆角 */
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
</style>

在上面的代码中，我们使用了border-radius属性来设置list-item类的圆角。border-radius的值可以根据你的需求进行调整，这里设置为10px作为示例。

注意事项

1. 样式作用域：在nvue页面中，使用<style scoped>可能不会像在vue页面中那样工作，因为nvue的样式处理机制有所不同。如果样式没有生效，尝试去掉scoped属性或将样式直接定义在全局样式文件中。

2. 性能考虑：在使用list组件时，注意性能优化，尤其是在处理大量数据时。可以考虑使用分页加载或虚拟列表等技术来减少渲染时间和内存占用。

3. 调试：如果圆角样式没有生效，检查是否有其他样式覆盖了border-radius属性，或者使用开发者工具检查元素的具体样式。

通过上述方法，你应该能够在uni-app的subNvue页面中成功为list组件的每一项应用圆角样式。