vue文字无缝滚动插件vue-seamless-scroll

￡神魔★判官ぃ 2022-09-07 14:56 630阅读 0赞

订阅专栏  
（1）安装执行命令

npm install vue-seamless-scroll --save  
（2）在main.js文件里面引入使用：

import scroll from 'vue-seamless-scroll'  
Vue.use(scroll)  
（3） 实例

<template>  
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">  
        <ul class="item">  
            <li v-for="item in listData">  
                <span class="title" v-text="item.title"></span>  
            </li>  
        </ul>  
    </vue-seamless-scroll>  
</template>  
<style lang="scss" scoped>  
    .seamless-warp \{  
        height: 229px;  
        overflow: hidden;  
    \}  
</style>  
<script>  
    export default \{  
        data () \{  
            return \{  
                listData: \[\{  
                   'title': '无缝滚动第一行无缝滚动第一行',  
                 \}, \{  
                    'title': '无缝滚动第二行无缝滚动第二行',  
                 \}, \{  
                     'title': '无缝滚动第三行无缝滚动第三行',  
                 \}, \{  
                     'title': '无缝滚动第四行无缝滚动第四行',  
                 \}, \{  
                     'title': '无缝滚动第五行无缝滚动第五行',  
                 \}\]  
                \}  
            \},  
            computed: \{  
                optionHover () \{  
                    return \{  
                            hoverStop: false //鼠标悬停关闭

singleWidth: 0, // 单行停顿的宽度(默认值0是无缝不停止的滚动)

singleHeight:26//单行停顿间距(不需要停顿不设置)

waitTime: 2500//单行停顿时间(不需要停顿不设置)

step: 0.5//向上滚动不停顿

limitMoveNum: 2, // 开始无缝滚动的数据量

direction: 0, // 0向下 1向上 2向左 3向右

openWatch: true, // 开启数据实时监控刷新dom

\}  
                \}  
             \}  
       \}  
</script>

（4）文档链接

demo链接:[https://chenxuan1993.gitee.io/component-document/index\_prod\#/component/seamless-default][https_chenxuan1993.gitee.io_component-document_index_prod_component_seamless-default]  
————————————————  
  
原文链接：https://blog.csdn.net/qq\_24612793/article/details/103959408

[https_chenxuan1993.gitee.io_component-document_index_prod_component_seamless-default]: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default