当前位置：首页 > VUE

vue实现横向列表

2026-02-19 11:53:38VUE

实现横向列表的常用方法

使用CSS Flexbox布局

在Vue组件中，通过CSS的display: flex和flex-direction: row实现横向排列：

<template>
  <div class="horizontal-list">
    <div v-for="item in items" :key="item.id" class="list-item">
      {{ item.text }}
    </div>
  </div>
</template>

<style scoped>
.horizontal-list {
  display: flex;
  flex-direction: row;
  gap: 10px; /* 可选：设置项目间距 */
  overflow-x: auto; /* 可选：支持横向滚动 */
}
.list-item {
  flex-shrink: 0; /* 防止项目压缩 */
}
</style>

使用CSS Grid布局

通过Grid布局的grid-auto-flow: column实现横向排列：

vue实现横向列表

<style scoped>
.horizontal-list {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
}
</style>

使用第三方库（如vue-horizontal-list）

安装库后快速实现横向列表：

vue实现横向列表

npm install vue-horizontal-list

<template>
  <vue-horizontal-list :items="items" :options="{ responsive: [{ end: 576, size: 1 }, { size: 3 }] }">
    <template v-slot:default="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </vue-horizontal-list>
</template>

响应式处理

添加响应式断点控制横向排列数量：

@media (max-width: 768px) {
  .horizontal-list {
    flex-wrap: wrap;
  }
}

横向滚动实现

当内容超出容器宽度时，通过以下CSS启用横向滚动：

.horizontal-scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-item {
  display: inline-block;
}

性能优化建议

对于大型列表，建议使用虚拟滚动技术（如vue-virtual-scroller）减少DOM节点：

npm install vue-virtual-scroller

<template>
  <RecycleScroller 
    class="horizontal-list"
    :items="items"
    :item-size="100"
    direction="horizontal">
    <template v-slot="{ item }">
      <div class="item">{{ item.text }}</div>
    </template>
  </RecycleScroller>
</template>