vue 消息通知滚动条

Vue消息通知滚动条是通过使用定时器和数组操作来实现的。首先，在data属性中定义了一个名为animate的变量和一个名为messageList的数组，用来控制过渡动画和存储通知消息。然后，在created方法中使用setInterval函数设定了一个定时触发滚动函数messagescroll。messagescroll函数中，将数组的第一个元素追加到数组最后面，并删除数组的第一个元素，实现消息的滚动效果。在滚动过程中，通过设置animate变量来开启和关闭过渡动画。最后，在模板中使用v-for指令遍历messageList数组，实现消息的展示。

代码示例：

<template>
  <div>
    <ul id="con1" ref="con1" :class="{anim:animate==true}" style="margin:0">
      <li v-for='item in messageList' :key="item.id">{{item.content}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate:false,
      messageList:[]
    };
  },
  created() {
    setInterval(this.messagescroll, 2000);
  },
  methods: {
    messagescroll() {
      this.animate = true;
      setTimeout(() => {
        this.messageList.push(this.messageList[0]);
        this.messageList.shift();
        this.animate = false;
      }, 3500);
    }
  }
};
</script>

<style scoped>
.anim {
  transition: all 0.5s;
}
</style>