一、效果

二、实现

安装依赖：

npm install vue-seamless-scroll

SeamlessScroll/index.vue组件

<template>
  <Scroll :data="scrollData" class="seamless-wrapper">
    <div v-for="item of scrollData" :key="item" class="row">
      <span>无缝滚动第一行无缝滚动第{{ item }}行</span>
      <span>2023-09-20</span>
    </div>
  </Scroll>
</template>
<script>
import Scroll from 'vue-seamless-scroll'
export default {
  components: { Scroll },
  data() {
    return { scrollData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }
  },
}
</script>
<style lang="less" scoped>
.seamless-wrapper {
  height: 200px; // 必须设置高度，并且小于子容器的高度
  overflow: hidden; // 和height搭配，将超出的部分隐藏
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>

三、向下滚动

Scroll标签添加属性：:classOption="{ direction: 0 }"

四、向左滚动

  <Scroll :data="scrollData" :classOption="classOption" class="seamless-wrapper">
    <div class="row">
      <div v-for="item of scrollData" :key="item" v-text="item" />
    </div>
  </Scroll>
  
  
  
  data：
  
      scrollData: ['在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。', '技术是开发它的人的共同灵魂。'],
      classOption: { direction: 2, limitMoveNum: 2 },
      
      
  css：

.seamless-wrapper {
  overflow: hidden; // 超出宽度的部分隐藏
  .row {
    width: 700px; // 确保子容器的宽度要大于父容器的宽度
    display: flex;
  }
}