使用 vue-seamless-scroll 来实现
最终效果

微信截图_20200904110844.png

1、安装

cnpm install vue-seamless-scroll --save

2、引入

import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    components:{
        vueSeamlessScroll
    }
}

3、使用

<template>
     <vue-seamless-scroll :data="winnersList" class="winners-list-cont" :class-option="classOption">
                    <ul>
                        <li v-for="(item,index) of winnersList" :key="index">
                            <em class="num">{{index+1}}</em>
                            <span class="avatar"><img :src="item.avatar" alt=""></span>
                            <h2 class="name">{{item.name}}</h2>
                            <h3 class="product-title">{{item.title}}</h3>
                            <div class="btn bgcolor1">{{item.grade}}</div>
                        </li>
                    </ul>
      </vue-seamless-scroll>
</template>
<script>
export default {
 computed: {
        classOption () {
            return {
            step: 0.5, // 数值越大速度滚动越快
            limitMoveNum: this.winnersList.length, // 开始无缝滚动的数据量 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)
            }
        }
    },
}
</script>
<style lang="stylus">
.winners-list-cont
      width 95%
      height 8.16rem
      margin 0 auto
     overflow hidden
</style>