当前位置：首页 > VUE

vue实现横向列表

2026-01-18 19:31:27VUE

实现横向列表的方法

在Vue中实现横向列表可以通过CSS样式控制列表项的排列方式。横向列表通常用于导航菜单、图片展示等场景。

使用flex布局实现

flex布局是实现横向列表最简单的方法之一，通过设置容器的display: flex属性即可。

vue实现横向列表

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

<style>
.horizontal-list {
  display: flex;
  gap: 10px; /* 设置项目间距 */
}

.list-item {
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
}
</style>

使用inline-block实现

如果不使用flex布局，可以通过设置display: inline-block实现横向排列。

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

<style>
.horizontal-list {
  white-space: nowrap; /* 防止换行 */
}

.list-item {
  display: inline-block;
  margin-right: 10px;
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
}
</style>

响应式横向列表

为了实现响应式布局，可以添加媒体查询调整列表项的排列方式。

vue实现横向列表

.horizontal-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px;
}

@media (max-width: 600px) {
  .list-item {
    flex: 1 0 100%; /* 小屏幕时垂直排列 */
  }
}

横向滚动列表

当内容较多需要横向滚动时，可以设置容器为固定宽度并允许水平滚动。

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

<style>
.scroll-container {
  width: 100%;
  overflow-x: auto; /* 允许水平滚动 */
}

.horizontal-scroll {
  display: flex;
  width: max-content; /* 根据内容扩展宽度 */
}

.scroll-item {
  flex-shrink: 0; /* 防止项目缩小 */
  padding: 8px 16px;
  margin-right: 10px;
  background: #f0f0f0;
}
</style>

使用第三方组件库

如果使用UI框架如Element UI、Vuetify等，它们通常提供了现成的横向列表组件。

<!-- 使用Element UI -->
<template>
  <el-row :gutter="20">
    <el-col v-for="item in items" :key="item.id" :span="6">
      <div class="grid-content">{{ item.text }}</div>
    </el-col>
  </el-row>
</template>

<!-- 使用Vuetify -->
<template>
  <v-container>
    <v-row>
      <v-col v-for="item in items" :key="item.id" cols="12" sm="6" md="4">
        <v-card>{{ item.text }}</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

这些方法可以根据具体需求选择使用，flex布局是最推荐的方式，因为它提供了更好的灵活性和响应式支持。