vue写的无缝隙表单滚动报错,请问我需要怎么解决问?

Question

1,控制台报的问题

2代码如下
html部分
<div class="nwwest-roll" id="nwwest-roll">

   <ul id="roll-ul">
    <li v-for="item in list" ref="rollul" :class="{anim:animate==true}"  @mouseover="sss">
     <div>
      <span class="name">{{item.name}}</span>
        <span class="site">{{item.site}}</span>
    </div>
   </li>
  </ul>

</div>
js部分
export default {

name: 'FlowTbales1',
data() {
  return {
    animate:true,
    list:[
      {"name":"1","site":"北1","gsmc":"柠檬树装饰1"},
      {"name":"2","site":"北2","gsmc":"柠檬树装饰2"},
      {"name":"3","site":"北3","gsmc":"柠檬树装饰3"},
      {"name":"4","site":"北4","gsmc":"柠檬树装饰4"},
      {"name":"5","site":"北5","gsmc":"柠檬树装饰5"},
      {"name":"6","site":"北6","gsmc":"柠檬树装饰6"},
      {"name":"7","site":"北7","gsmc":"柠檬树装饰7"},
      {"name":"8","site":"北8","gsmc":"柠檬树装饰8"},
      {"name":"9","site":"北9","gsmc":"柠檬树装饰9"},
      {"name":"10","site":"北10","gsmc":"柠檬树装饰10"},
      {"name":"11","site":"北11","gsmc":"柠檬树装饰11"}
    ],
    time:''
  }
},
created(){
  setInterval(this.scroll,2000)
},
beforeDestroy() {
  clearInterval(this.scroll);
  this.list = null;
},
methods: {
  scroll () {
    let con1 = this.$refs.rollul;
    con1[0].style.marginTop = '-30px';
    this.animate = !this.animate;
    var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
    setTimeout(function () {
      that.list.push(that.list[0]);
      that.list.shift();
      con1[0].style.marginTop = '0px';
      that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
    }, 0)
  },
},

}

css部分
.newest-bill .nwwest-roll {
padding-left: 15px;
height: 360px;
margin: 10px auto;
overflow: hidden;
transition: all 0.5s;
}
.newest-bill .nwwest-roll li{

width: 100%;

height: 35px;
line-height: 35px;

overflow: hidden;

}

.anim{
transition: all 0.5s;

}

Answer 1

瞎猜一下啊！

时机不对，首先放在 mounted 中，created 时候页面列表还未渲染完毕。
另外，你操作了数组源数据，实际上 vue 也有自己的更新队列，此时数据更新可能并未更新到 DOM 上次，使用 self.$nextTick 回调试试，此时是 Vue.js 操作 DOM 更新后的回调。

另：

在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向

这段解释是错误的，你应该了解一下 this 指向，this 指向运行时调用的对象，setTimeout 为 window 下的方法，自然 this 此时指向 window，除了缓存引用， 使用箭头函数不失为比较优雅的解决方案。