uniapp 内容列表

uniapp 内容列表的实现方法

在 uniapp 中实现内容列表可以通过多种方式完成，以下是几种常见的方法：

使用 scroll-view 组件

scroll-view 组件适合需要滚动展示的列表内容。可以通过设置 scroll-y 属性实现垂直滚动。

<scroll-view scroll-y style="height: 300px;">
  <view v-for="(item, index) in list" :key="index">
    {{ item.title }}
  </view>
</scroll-view>

使用 uni-list 组件

uniapp 提供了 uni-list 组件，专门用于展示列表内容，支持多种样式和交互。

<uni-list>
  <uni-list-item v-for="(item, index) in list" :key="index" :title="item.title" />
</uni-list>

使用 swiper 组件实现横向列表

如果需要横向滚动的列表，可以使用 swiper 组件。

<swiper :indicator-dots="true" :autoplay="true" :interval="3000">
  <swiper-item v-for="(item, index) in list" :key="index">
    <view>{{ item.title }}</view>
  </swiper-item>
</swiper>

通过 CSS 实现网格列表

使用 CSS 的 Flex 布局或 Grid 布局可以实现网格化的内容列表。

<view class="grid-container">
  <view v-for="(item, index) in list" :key="index" class="grid-item">
    {{ item.title }}
  </view>
</view>

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid-item {
  width: 48%;
  margin-bottom: 10px;
}

动态加载更多数据

对于长列表，可以通过监听滚动事件动态加载更多数据。

<scroll-view scroll-y @scrolltolower="loadMore" style="height: 300px;">
  <view v-for="(item, index) in list" :key="index">
    {{ item.title }}
  </view>
  <view v-if="loading">加载中...</view>
</scroll-view>

export default {
  data() {
    return {
      list: [],
      loading: false,
      page: 1
    }
  },
  methods: {
    loadMore() {
      if (this.loading) return
      this.loading = true
      this.page++
      // 模拟异步加载数据
      setTimeout(() => {
        this.list = [...this.list, ...newData]
        this.loading = false
      }, 1000)
    }
  }
}

性能优化建议

对于长列表，建议使用 virtual-list 组件或分页加载，避免一次性渲染大量 DOM 节点导致性能问题。

<virtual-list :size="50" :remain="10" :items="list">
  <template v-slot="{ item }">
    <view>{{ item.title }}</view>
  </template>
</virtual-list>

样式定制

可以通过 CSS 自定义列表项的样式，例如添加边框、阴影或动画效果。

.list-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s;
}

.list-item:active {
  background-color: #f5f5f5;
}

以上方法可以根据实际需求选择或组合使用，灵活实现 uniapp 中的内容列表展示。