如何在Vue中制作水平缩略图可滚动轮播？

Question

我正在尝试复制这种水平可滚动的缩略图容器。

我的 Vue.js 代码中有一个 GARMENTS 按钮，它返回如下缩略图。

我从 Firebase 存储中获取缩略图，我希望轮播看起来更像是水平滚动的第一张图片。我应该添加什么才能使它变成这样？

这是Buttons 组件的代码：

<template>
<div class="gallery-container gallery-garments hide">
    <div v-for="gar in allGarments" :key="gar.id" class="gallery-item">
        <img :src="getImgUrl(gar.thumbnailLink)" height="150" width="100">
        <span style="display:block">{{gar.name}}</span>
    </div>
</div>
    <v-btn color="primary" v-on:click="toggleGallery('garments')">Garments</v-btn>
    <v-btn>Templates</v-btn>
    <v-btn>Download</v-btn>
    <v-btn>Share</v-btn>
</template>

<script>
export default {
    name: "Buttons",
    data () {
        return {
            garments: [],
        }
    },
    methods: {
        toggleGallery(type) {
            document.querySelectorAll(".gallery-container").forEach(el => {
                if (!el.classList.contains(`gallery-${type}`)) {
                    el.classList.add("hide")    
                }
            })
            document.querySelector(`.gallery-${type}`).classList.toggle("hide")
        },
        getImgUrl(url){ return url; }
    }
}
</script>

<style>

</style>

Answer 1

在您的 CSS 中，一个好的开始应该是：

.gallery-container {
  display: flex;
  flex-direction: row;
  height: 200px;
  overflow-x: scroll;
}

演示：

.gallery-item {
  display: inline-block;
}

.gallery-container {
  display: flex;
  flex-direction: row;
  height: 200px;
  overflow-x: scroll;
}

<div class="gallery-container gallery-garments hide">
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
    <div class="gallery-item">
        <img src="" height="150" width="100">
        <span style="display:block">Name</span>
    </div>
</div>