vue-seamless-scroll组件踩坑指南

文字滚动是一个常见场景，例如网站的公告栏，vue-seamless-scroll是基于vue的一款无缝滚动组件，适合于选用vue的项目，其它类似的还有基于基于jquery的marqee

一、基本使用

1.引入

• npm安装

  npm install vue-seamless-scroll --save
  

• script引入

  https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js
  

• 离线使用

  如果是在内网环境中，可以通过上面的地址下载成js文件，然后在项目中通过script引入

2.使用

• 页面中使用

<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="scroll">
                <ul class="ul-scoll">
                    <li v-for="(item, index) in listData" :key='index'>
                        <span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>
                    </li>
                </ul>
</vue-seamless-scroll>

• 为vue-seamless-scroll指定样式

.scroll{
    height:200px;
    overflow:hidden;
}

• 为vue-seamless-scroll配置选项

// 监听属性 类似于data概念
        computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
 
        }

二、踩坑经历

1.引入顺序的问题

因为vue-seamless-scroll是基于vue的组件，所以在使用script引入的时候，**一定要注意引入vue-seamless-scroll要在引入vue后，**不然html中的vue-seamless-scroll标签根本不会被渲染

2.vue-seamless-scroll 样式一定要正确设置

必须给vue-seamless-scroll标签设定固定高度，并设置overflow为hidden

{
    height:100%;
    overflow:hidden;
}

3.:data属性要正确设置

：data中是指定的数据源，需要根据数据源计算div高度，所以一定要正确指定

4.多重循环无法正确滚动的情况

当组件中存在二级循环的时候，组件只会根据:data中指定的一级数组长度来计算高度，很可能会出现无法滚动的情况，所以这个时候则需要通过属性limitMoveNum设置来主动调整使其滚动。具体设置

option(){
    return {
        limitMoveNum:1 //最小的滚动行数，当数据条数大于此数时，就会滚动 
    }
}