滚动控制 #

<script setup>
import vueScrollComponents from "vue-scroll-components";
import { ref } from 'vue'
const data = ref([
    {
        'title': '汉皇重色思倾国，御宇多年求不得。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '杨家有女初长成，养在深闺人未识。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '天生丽质难自弃，一朝选在君王侧。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '回眸一笑百媚生，六宫粉黛无颜色。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '春寒赐浴华清池，温泉水滑洗凝脂。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '侍儿扶起娇无力，始是新承恩泽时。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '云鬓花颜金步摇，芙蓉帐暖度春宵。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '春宵苦短日高起，从此君王不早朝。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '承欢侍宴无闲暇，春从春游夜专夜。',
        'auth': '（唐）白乐天'
    },
    {
        'title': '后宫佳丽三千人，三千宠爱在一身。',
        'auth': '（唐）白乐天'
    },
])
const speed = ref(1) // 速度
const scroll = ref(true) // 状态
const handle = (e) => {
    speed.value = parseFloat(e.target.value)
}
</script>

<template>
    <vueScrollComponents v-model:speed="speed" v-model:scroll="scroll" :data="data" class="wrap">
        <ul class="item">
            <li v-for="(item, index) in data" :key="index">
                <span class="title" v-text="item.title"></span>
                <span class="auth" v-text="item.auth"></span>
            </li>
        </ul>
    </vueScrollComponents>
    <div class="btn-wrap">
        <span>速度控制：</span>
        <input type="range" name="cowbell" min="0" max="5" value="1" step="0.1" @input="handle" />
        <span>{{ speed }}</span>
    </div>
    <div class="btn-wrap">
        <span>状态控制：</span>
        <button type="submit" @click="() => scroll = !scroll">{{ scroll ? '点击暂停' : '点击滚动' }}</button>
    </div>
</template>

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

    ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;

        li {
            margin: 0;
            height: 32px;
            line-height: 32px;
            display: flex;
            justify-content: space-between;
        }
    }
}

.btn-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
</style>