实例：

首先新建一个公用写组件的文件下创建新的vue组件Sroller为例

Scroller.vue

布局区域

  <template>
     <div class="wrap">
      <div id="box">
         <div id="marquee">{{text}}</div>
         <div id="copy" style="display: none;margin-top: -5px"></div>
     </div>
    <div id="node">{{text}}</div>
  </div>
</template>

js区域

     <script type="text/ecmascript-6">
      export default {
      name:'Scroller',
      props: ['lists'], // 父组件传入数据， 数组形式 [ "连雨不知春去"，"一晴方觉夏深"]
     data () {
        return {
           text: '' // 数组文字转化后的字符串
                 }
              },
      methods: {
          move () {
          // 获取文字text 的计算后宽度  （由于overflow的存在，直接获取不到，需要独立的node计算）
           let width = document.getElementById('node').getBoundingClientRect().width
          let box = document.getElementById('box')
         let copy = document.getElementById('copy')
         copy.innerText = this.text // 文字副本填充
         let distance = 10 // 位移距离
         // 设置位移
        setInterval(function () {
        distance = distance - 1
       // 如果位移超过文字宽度，则回到起点
        if (-distance >= width) {
        distance = 16
       }
        box.style.transform = 'translateX(' + distance + 'px)'
      }, 40)
    }
  },
     // 把父组件传入的arr转化成字符串
      mounted: function () {
       for (let i = 0; i < this.lists.length; i++) {
         this.text += ' ' + this.lists[i]
          }
     },
     // 更新的时候运动
       updated: function () {
         this.move()
     }
  }
</script>

样式区域

 <style scoped>
/*样式的话可以写*/
  .wrap {
overflow: hidden;
color: #005bbe;
     }
 #box {
/*width: 80%;*/
height: 100%;
 }
 #box div {
float: left;
 }
 #marquee {
margin: -5px 16px 0 20px;
}
#node {
position: absolute;
z-index: -99;
top: -99px;
}
</style>

• 以上就是可以实现滚动的组件

在需要的页面中调用Scroller.vue文件，如：

Demo.vue

布局区域

  <template>
     <div class="aa">
       <Scroller :lists="lists" class="scrollContainer left" />
     </div>
</template>

js区域

     <script type="text/ecmascript-6">
      export default {
      components: {Scroller},
      props: ['lists'], // 父组件传入数据， 数组形式 [ "aaaa"，"bbbbb"]
       data () {
        return {
         lists:['欢迎大家来一起学习'],
                 }
              }
        }
</script>

样式区域

  <style scoped>
   /*样式的话可以写*/
.scrollContainer {
color: #ffffff;
font-size: 16px;
margin-left: 10px;
width:79%;
height: 30px;
line-height: 30px;
overflow: hidden;
 }
</style>

• 以上就是可以实现滚动的功能

                                                                   ——————我是晨曦，欢迎大家多多提出意见一起共同进步