# 新闻/消息上下滚动

新闻/消息上下滚动

vue create 项目
cd 项目
cnpm install less less-loader --save-dev(遇到引入less问题，用这个解决的)
npm run serve

1、html

 <!--  通知消息滚动模板    -->
  <div class="box">
      <ul class="con1" ref="con1" :class="{anim:animate==true}">
        <li v-for='item in messageList' :key="item.id">
          {
  {item.name}}
        </li>
        </ul>
    </div>

2、css

<style>
.box{
  width: 98%;
  height: 64px;
  overflow: hidden;
  margin-left: 1.5%;
  margin-top: 0.533rem;
  background: #f9f9f9;
  border-radius: 0.213rem;
}
.anim{
  transition: all 0.5s; 
  margin-top: -30px;
}
.con1 li{
  list-style: none;
  line-height: 40px;
  height: 40px;
  font-size: 0.053rem;
}

</style>

3、JS

data() {
  return {
    animate:false, //控制过渡动画是否开启
    messageList:[{name:"马云"},{name:"雷军"},{name:"马化腾"}],//通知消息列表
   }
 },

 created() {
  // 定时触发滚动函数
  setInterval(this.messagescroll,2000)
},

methods:{
  //通知消息滚动函数
  messagescroll(){
    this.animate=true;    // 开启过渡动画
    setTimeout(()=>{
      this.messageList.push(this.messageList[0]);  // 将数组的第一个元素追加到数组最后面
      this.messageList.shift();               //然后删除数组的第一个元素
      this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
    },3500)
  },
  }
</