Vue 无缝公告滚动

1、安装插件

npm install vue-seamless-scroll --save
yarn add vue-seamless-scroll

2、引用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3、参数配置

参数	描述	默认值	参数类型
step	值越小滚动速度越快越快	1	Number
limitMoveNum	开始无缝滚动最小数据长度	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单个停止高度（默认为零无缝）=>方向0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	是否自动播放开关需要设置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	String
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean

 

 

4、代码应用

<template>
    <vue-seamless-scroll 
        :data="scrollList" 
        :class-option="classOption" 
        class="scroll-content">
        <ul>
            <li v-for="(item,index) in scrollList"
                :key="index">
                {{item}}
            </li>
        </ul>
    </vue-seamless-scroll>
</template>
<script>
    import Vuefrom 'vue'
    import scroll from 'vue-seamless-scroll'
    Vue.use(scroll)
    export default{
        data() {
            return {
                scrollList:[],
                classOption:{
                    singleHeight: 57,
                    waitTime: 2000,
                    step: 0.5,
                    hoverStop: false
                }
            }
        }
    }
</script>
<style>
    .scroll-content {
        height: 570px;
        overflow: hidden;
    }
</style>

5、展示结果

向上逐条滚动

注意：数据不够时，不滚动；