左右滚动 #

<template>
    <vueScrollComponents :options="options" class="wrap">
        <div :style="{ whiteSpace: 'nowrap' }">
        江天一色无纤尘，皎皎空中孤月轮。回眸一笑百媚生，六宫粉黛无颜色。
        </div>
    </vueScrollComponents>
</template>

<script setup>
import vueScrollComponents from "vue-scroll-components";
import { ref } from 'vue'
const options = ref({
    // 滚动方向
    direction: 'left',
    // 滚动速度
    speed: 1,
})
</script>

<style scoped lang="scss">
.wrap {
    width: 300px;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
}
</style>

<template>
    <vueScrollComponents :options="options" class="wrap">
        <ul>
            <li v-for="index in 8" :key="index" class="item">
                {{ index }}
            </li>
        </ul>
    </vueScrollComponents>
</template>

<script setup>
import vueScrollComponents from "vue-scroll-components";
import { ref } from 'vue'
const options = ref({
    // 滚动方向
    direction: 'left',
    // 滚动速度
    speed: 1,
})
</script>

<style scoped lang="scss">
.wrap {
    width: 600px;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;

    ul {
        list-style: none;
        display: flex;
        margin: 0;

        li {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }
    }
}
</style>