vue从左往右数据滚动

1、视图

<div id="demo" class="qimo8"> 
  <div class="qimo"> 
    <div id="demo1"> 
      <ul> 
        <li v-for="(item,index) in dataList"><a href='#'>{{item.text}}</a></li> 
      </ul> 
    </div> 
   <div id="demo2"></div> 
  </div> 
</div> 

js逻辑

// 方法
  Marquee () {
      var demo = document.getElementById('demo')
      var demo1 = document.getElementById('demo1')
      var demo2 = document.getElementById('demo2')
      demo2.innerHTML = document.getElementById('demo1').innerHTML
      if (demo.scrollLeft - demo2.offsetWidth >= 0) {
        demo.scrollLeft -= demo1.offsetWidth
      } else {
        demo.scrollLeft++
      }
    },

mounted () {
    setInterval(this.Marquee, 20)
},

css样式：

      .qimo8 {
        overflow: hidden;
        width: 815px;
    }
    /*外层div,设置公告可见范围*/
    
    .qimo8 .qimo {
        /*width:9999999999px;*/
        width: 8000%;
        height: 30px;
    }
    /*公告内容,给内容预留足够的空间宽度*/
    
    .qimo8 .qimo div {
        float: left;
    }
    /*包括demo1和demo2 让两个层合并为一排，也是无缝对接的关键*/
    
    .qimo8 .qimo ul {
        float: left;
        height: 30px;
        overflow: hidden;
    }
    
    .qimo8 .qimo ul li {
        float: left;
        /*line-height: 30px;*/
        list-style: none;
    }
    
    .qimo8 li a {
        margin-right: 1rem;
        font-size: 0.26rem;
        color: rgb(249, 201, 118);
    }