vue 内容滚动组件

原创

已于 2023-01-17 10:49:00 修改 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-11-28 17:07:43 首次发布

这是一个介绍Vue滚动插件的博客，插件支持上下左右滚动，可自定义滚动速度、字体大小、起始位置等。通过props参数如mouseMethod、fontSize、wrapWidth等实现不同功能，例如鼠标移入移出控制、延迟滚动、内部滚动等。示例代码展示了不同滚动方向和控制方式的用法。插件还包括了鼠标滚轮滚动速度控制和暂停功能。

整理的一个vue滚动插件，挺好用的共享一下

可上下左右滚动
控制滚动速度
字体大小
鼠标移入移出
自定义滚动起始位置
鼠标移入后可以内部滚动 (滚动方向可通过参数控制)

代码很简单，大佬勿喷。不完善的地方可自行优化

props参数

|参数 | 说明 | 类型 |默认值 |

使用例子

左边正常滚动

<template>
    <div style="width: 100%; height: 50px;">
        <marquee-wrap wrapWidth :textSpeed="1.2" :fontSize="16" mouseMethod
            style="color: red;font-weight: 600;">
            <span>滚动测试</span>
        </marquee-wrap>
    </div>
</template>

右边加速滚动

<template>
    <div style="width: 100%; height: 50px;">
        <marquee-wrap wrapWidth :textSpeed="2" :fontSize="16" mouseMethod reverse 
            style="color: red;font-weight: 600;">
            <span>滚动测试</span>
        </marquee-wrap>
    </div>
</template>

向上滚动延迟

<template>
    <div style="width: 100%; height: 50px;">
        <marquee-wrap :textS

最低0.47元/天解锁文章