vue项目中实现消息从上到下更新滚动

vue项目中实现消息从上到下更新滚动

需求说明

一个盒子中只展示两条数据,来新数据后,新数据自动放到最上层,从上到下滑动把原数据顶下去.

实现思路

我总结了一下,我的思路大概就是一个四位轮播思路,我给大家画了一个图,便于更好理解,1234位四个位置,初始消息只有2,3位置的两个消息,滑动时最多同时存在3条消息,先别着急实现,慢慢往下看.

1.把所需页面结构和样式先画出来

HTML

<div
    class="lunboBox"
    :style="{ height: height * lineNum + 'px' }"
    @mouseover="mouseOver"
    @mouseleave="mouseLeave"
  >
    <div
      :class="['lunbo', { 'lunbo_unanim': stop }]"
      ref="lunbo"
      style="bottom: 0"
    >
      <div v-for="(item, index) in msgList" :key="index" class="messages">
        <msgItem :messageObj="item"></msgItem>
      </div>
    </div>
  </div>

CSS

<style scoped lang="less">
.lunboBox {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.lunbo {
  position: absolute;
  left: 0;
  overflow: hidden;
  transition: bottom 1s linear;
  display: flex;
  flex-direction:column-reverse;
}
.lunbo_unanim {
  transition: none;
}
</style>

JS
需要声明的变量

data() {
    return {
      height: 100,
      stop: true,
      lineNum: 2,
      timer2: null,
      msgList: [], //页面中数据
      newMsgList: [],   //新数据数组
    };
  },

设计思路*(其实在开发过程中难免会拷贝别人的代码,但是咱们在拷贝的同时也要学习别人的功能实现思路,这样在遇到类似问题可以举一反三,所以我尽量会把解决思路也写出来)*

• 初始只有2,3两个div,同时盛放这两个div的大盒子(父级)需要按照底部bottom=0来定位.新消息来时在数组头部添加新数据也就是1(在大盒子父级中添加为1的div)
• 打开动画开关修改123大盒子的bottom值,div向下滑动,滑动完成后,删除最下边的3div.
• 停止动画,把bottom变为0,回归初始位置
  下边是按照这个思路封装的方法,由于我们的需要要求闪烁,我在代码中没有展示闪烁逻辑,我把闪烁代码已经删掉.
  动画方法

move(item) {
      if (this.timer2) {
        clearTimeout(this.timer2);
        this.timer2 = null;
      }
      let that = this;
      let lunbo = this.$refs.lunbo;
      this.stop = false;
      // this.msgList.unshift(item);
      this.msgList.push(item);
      //是轮播div向下滑动
      lunbo.style.bottom = "-" + this.height + "px";
      // console.log(JSON.parse(JSON.stringify(this.msgList)))
      //滑动执行完删除msgList尾部数据,把动画停掉后把bottom改为0(时间要稍稍大于动画时间1s即可)
      this.timer2 = setTimeout(() => {
        // that.msgList.pop();
        that.msgList.shift();
        that.stop = true;
        lunbo.style.bottom = 0;
        //执行完成清除延时器
        clearTimeout(that.timer2);
        that.timer2 = null;
      }, 1050);
    },