数据 消息 轮播 滚动

1.显示单条消息 需求缓慢移入 等待 事件 缓慢移出

 获取整体数据绝对高度动画效果实现 两个定时器 第一个定时器 为一个消息进来到等待出去的整体间隙 定时器内是消息进来的缓慢动画效果

实现过程是操作整体盒子的margin-top；当走完整个盒子是高度重置为0 执行下一次循环

 //消息提示 上下滚动
    notice() {
      //  盒子的总高度
      let Element = this.$refs.notice.childNodes.length;
      let ElementHeight = this.$refs.notice.childNodes[0].offsetHeight;
      //总高度为
      let height = Element * ElementHeight;
      let top = 0;
      setInterval(() => {
        if (top >= height) {
          top = 0;
        }
        var tiem = setInterval(() => {
          this.$refs.notice.style.marginTop = -top + "px";
          if (top % ElementHeight == 0) {
            clearInterval(tiem);
          }
          top += 1;
          if (top >= height) {
            this.$refs.notice.style.marginTop = 0 + "px";
          }
        }, 10);
      }, 3000);
    },

2.消息匀速轮播 操作 元素的 添加 删除实现

 定时器循环条件为 top :0  到 一条消息的高度 因为 操作时复制第一条消息 添加到整体大盒子的后面，最后在删除第一条消息

 

 //数据滚动
    autoroll() {
      //整体 盒子高度  roll
      let roll = this.$refs.roll;
      //第一个盒子
      let roll1 = this.$refs.roll.childNodes[0];
      //单个盒子的高度
      let height = roll1.offsetHeight;
      // console.log(height);
      let top = 0;
      setInterval(() => {
        roll.style.marginTop = -top + "px";
        //TOP 在 0 - 一个盒子的高度 循环
        if (top == 0) {
          //获取第一个盒子
          let roll2 = this.$refs.roll.childNodes[0];
          //复制第一个盒子
          let roll3 = roll2.cloneNode(true);
          //添加到盒子最后
          roll.appendChild(roll3);
          //删除第一个盒子
          roll.removeChild(this.$refs.roll.childNodes[0]);
        }
        top += 1;
        if (top > height) {
          top = 0;
        }
      }, 50);
    },