1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save　　

2、页面引入

<vue-seamless-scroll></vue-seamless-scroll>
 
import vueSeamlessScroll from 'vue-seamless-scroll'
 
components: {
        vueSeamlessScroll
},　

3、配置属性（在监听中配置）

 computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.songList.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)
      };
    },
  },

4、完整代码

html
<div class="titleScroll">
          <span>广播名称</span>
          <span>广播频道</span>
        </div>
        <div class="scrollList">
          <vueSeamlessScroll :data="songList" :class-option="defaultOption">
            <div class="listScoll" v-for="item in songList" :key="item.id">
              <span>{{ item.name }}</span>
              <span>{{ item.singer }}</span>
            </div>
          </vueSeamlessScroll>
        </div>
<style>
.scrollList {
      width: 100%;
      height: calc(100%-16px);
      overflow: hidden;
      .listScoll {
        display: flex;
        justify-content: space-around;
        span {
          margin: 6px;
          padding: 5px;
        }
      }
    }
</style>

5、效果

img.png