Vue 中如何实现水平滚动列表？-猿码集

Vue 中如何实现水平滚动列表？

在 Vue 项目中，我们有时需要实现水平滚动列表，比如图片轮播、新闻滚动等。本文将介绍如何利用 Vue 实现简单的水平滚动列表。

1. 实现原理

实现水平滚动列表的原理其实很简单，就是创建一个可滚动的容器，将需要滚动的内容放入容器中，然后通过 CSS 属性设置容器的宽度为滚动内容的总宽度，触发容器的滚动。

1.1 容器设置

首先，我们需要在 Vue 组件的模板中创建一个容器，容器可以是 div 标签，也可以是其他标签，如 ul 标签。容器必须设置 overflow-x:scroll 属性才能实现水平滚动，同时还要设置 white-space:nowrap 属性，防止滚动内容换行：


.container{
  overflow-x: scroll;
  white-space: nowrap;
}

1.2 内容设置

将需要滚动的内容放入容器中，可以使用 div 标签、ul 标签等标签来实现。如果使用 ul 标签，建议将 li 标签设置为 display:inline-block 属性，才能使每个 li 标签以块级元素的方式排列，便于计算宽度。


  <li style="display:inline-block;margin-right:20px;color:red;">第1个标签</li>
  <li style="display:inline-block;margin-right:20px;color:blue;">第2个标签</li>
  <li style="display:inline-block;margin-right:20px;color:green;">第3个标签</li>
  <li style="display:inline-block;margin-right:20px;color:orange;">第4个标签</li>
  <li style="display:inline-block;margin-right:20px;color:purple;">第5个标签</li>

1.3 宽度设置

要让容器水平滚动，必须设置容器的宽度为滚动内容的总宽度。可以通过 JavaScript 来计算滚动内容的总宽度，也可以通过 CSS 来设置。在这里，我们使用 CSS 方式设置容器的宽度。

将每个 li 标签的宽度相加，便可得到滚动内容的总宽度。为了避免因为 padding 和 margin 造成的宽度偏差，建议将宽度设置为 calc(100% + 总padding + 总margin) 的方式，如下所示：


.container ul{
  width: calc(100% + 40px); /* 20px 是 left 和 right 的 margin，可以根据实际情况调整 */
}

2. Vue 实现

下面我们来看一下如何在 Vue 项目中实现水平滚动列表。在本例中，我们将使用一个组件来展示水平滚动列表。组件包含两个部分，分别是容器和内容。容器中包含了一个滚动条，用于滚动内容。

2.1 组件模板

首先，我们来编写组件的模板。模板中包含一个容器 div 和一个内容 ul，容器设置了滚动条，内容设置了 display:inline-block 属性以及 margin-right 和一个颜色样式。


<template>
  <div class="container">
      <li style="display:inline-block;margin-right:20px;color:red;">第1个标签</li>
      <li style="display:inline-block;margin-right:20px;color:blue;">第2个标签</li>
      <li style="display:inline-block;margin-right:20px;color:green;">第3个标签</li>
      <li style="display:inline-block;margin-right:20px;color:orange;">第4个标签</li>
      <li style="display:inline-block;margin-right:20px;color:purple;">第5个标签</li>
  </div>
</template>

2.2 组件样式

然后，我们来编写组件的样式。为了方便样式管理，我们将样式单独写在一个 .scss 文件中，并在组件中引入。

该样式进行了以下设置：

容器设置了 overflow-x:scroll 和 white-space:nowrap 属性，用于实现水平滚动。

内容使用 flex 布局和 justify-content:space-between 属性使每个 li 标签平均分配容器宽度。

每个 li 标签使用 display:inline-block、margin-right 属性，并设置了一个颜色样式。


<style lang="scss">
.container{
  overflow-x: scroll;
  white-space: nowrap;
  ul{
    display: flex;
    justify-content: space-between;
    li{
      display: inline-block;
      margin-right: 20px;
      color: #333;
    }
  }
}
</style>

2.3 组件注册

最后，我们需要将组件注册到 Vue 实例中，这样才能在其他组件或页面中使用该组件。


<script>
export default {
  name: "HorizontalScrollList", // 组件名称
};
</script>

3. 使用组件

组件注册完成后，我们就可以在其他组件或页面中使用该组件了。只需要在需要使用的地方，引入组件即可。如下所示：


<template>
  <div>
    <HorizontalScrollList />
  </div>
</template>
<script>
import HorizontalScrollList from "@/components/HorizontalScrollList.vue"; // 引入组件
export default {
  components: {
    HorizontalScrollList, // 注册组件
  },
};
</script>

总结

本文介绍了如何在 Vue 项目中实现水平滚动列表。实现原理是通过创建一个可滚动的容器，放入需要滚动的内容，并设置容器宽度、滚动条属性，触发容器的滚动。同时，本文还演示了如何通过 Vue 组件来实现水平滚动列表，使其可以更方便地在多个页面或组件中使用。

Vue 中如何实现水平滚动列表？