vue列表滚动（2）

div:

 <div id="box">
    <ul id="con1" ref="con1" :class="{ anim: animate == true }">
       <li v-for="item in items"  @click="onClick(item)">{{ item.name }}</li>
    </ul>
 </div>

css:

#box {
  width: 300px;
  height: 100px;
  overflow: hidden;
  padding-left: 30px;
  border: 1px solid black;
}
.anim {
  transition: all 0.5s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
  
}

vue:

   data 声明变量

  animate: false,
    items: [
      //消息列表对应的数组
      { name: "北京" },
      { name: "上海" },
      { name: "湖南" },
      { name: "广州" }，
    ],

 created初始化

 setInterval(this.scroll, 1000);

 methods方法

  scroll() {
      this.animate = true; 
      setTimeout(() => {
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 500);
    },


    onClick(item){
      console.log(item.name);
    }