vue3 横向排列，超出隐藏

在 Vue3 中，如果你想创建一个横向排列的列表，当内容超出屏幕时自动隐藏并显示滚动条，你可以结合 HTML、CSS 和 Vue 的模板一起实现。以下是一个基本的示例：

HTML:

<div id="app">
  <div class="carousel-items" :style="{ transform: 'translateX(' + scrollPosition + 'px)' }">
    <div v-for="(item, index) in items" :key="index">
      <!-- item 内容 -->
      <p>{{ item }}</p>
    </div>
  </div>
</div>

CSS:

.carousel-items {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

/* 当内容超出时，添加滚动条 */
.carousel-items::-webkit-scrollbar {
  width: 6px;
}

.carousel-items::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.carousel-items::-webkit-scrollbar-thumb {
  background: #888;
}

/* 移动端适配（iOS滑动效果更好） */
@media (hover: none) {
  .carousel-items::-webkit-scrollbar {
    width: 4px;
  }
}

JavaScript (Vue 3 配合 Composition API):

<template>
  <div ref="carouselItems" />
</template>

<script setup>
import { computed, onMounted, watchEffect } from 'vue';

const items = ['Item 1', 'Item 2', 'Item 3', '...']; // 你的数据源

let scrollPosition = 0;

onMounted(() => {
  watchEffect(() => {
    const carouselRef = ref();
    if (!carouselRef.value) return;

    const containerWidth = carouselRef.value.clientWidth;
    const contentWidth = document.querySelector('.carousel-items').scrollWidth;

    if (contentWidth > containerWidth) {
      scrollPosition = -Math.min(contentWidth - containerWidth, window.innerWidth); // 计算滚动位置
    } else {
      scrollPosition = 0;
    }
  });
});
</script>

以上代码会初始化一个滚动容器，并监听视口大小变化。如果内容超过了容器宽度，它会计算并设置滚动条的位置，使其隐藏不必要的内容。