vue 使用 vue-seamless-scroll 实现LED屏滚动效果

yarn add vue-seamless-scroll

<div class="index-roll">
                <vue-seamless-scroll :data="partnerList" :class-option="optionLeft">
                    <ul>
                        <li v-for="(item, index) in partnerList1" :key="index">
                            <img :src="item.imgUrl">
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>

partnerList: [
                { imgUrl: require('./img/logo1.png') },
                { imgUrl: require('./img/logo2.png') },
                { imgUrl: require('./img/logo3.png') },
                { imgUrl: require('./img/logo4.png') },
                { imgUrl: require('./img/logo5.png') },
                { imgUrl: require('./img/logo6.png') },
                { imgUrl: require('./img/logo7.png') }
            ],

computed: {
        optionLeft() {
            return {
                step: 2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量(不能超过partnerList长度)
                hoverStop: false, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
}

要想实现无卡顿，无缝连接显示

.index-roll{
  width: '这点的长度等于所以li width+padding+margin+border'；
  ul{
    display:flex;
    li{
        width:100px;
        height:20px
     }
  }      
}