vue移动端直播评论功能实现

1.barrage.vue

<template>
  <div class="barrage">
    <div class="comment">
      <div class="comment-wrap" ref="wrapper">
        <ul class="list" ref="list">
          <li v-for="item in list" :key="item.id">
            <span class="name">{{item.name}}：</span>
            <span class="content">{{item.content}}</span>
          </li>
        </ul>
      </div>
      <div class="rest-nums" v-show="restComment" @click="scrollBottom">{{restComment}}条新消息</div>
    </div>
  </div>
</template>
<script>
import smoothscroll from "smoothscroll-polyfill";
import { debounce, isScrollBottom } from "./barrageTool.js";
smoothscroll.polyfill(); // 移动端scrollTo behavior: "smooth"动画失效的polyfill
export default {
  data() {
    return {
      list: [],
      restComment: 0,
      restNums: 0,
      wrapperDom: null,
      listDom: null,
      wrapperHeight: 0
    };
  },
  mounted() {
    this.initDom();
    // ajax...
    const data = new Array(20).fill("");
    this.queue(data);
    setTimeout(() => {
      const list = new Array(10).fill("");
      this.queue(list);
    }, 30000);
  },
  methods: {
    initDom() {
      this.wrapperDom = this.$refs.wrapper;
      this.listDom = this.$refs.list;
      this.wrapperHeight = this.wrapperDom.offsetHeight;
    },
    addTimeOut(opt) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.addComment(opt);
          resolve();
        }, 500);
      });
    },
    // 队列添加消息
    async queue(data) {
      for (let i = 0; i < data.length; i++) {
        const opt = {
          name: i*i*i*i*i*i + "-用户名",
          content: i*i*i*i*i*i + "-评论内容",
          id: Date.now()
        };
        await this.addTimeOut(opt);
      }
    },
    addScroll() {
      debounce(this.listScroll, 200);
      this.isBindScrolled = true;
    },
    listScroll() {
      const ele = this.wrapperDom;
      const isBottom = isScrollBottom(ele, ele.clientHeight);
      if (isBottom) {
        this.restNums = 0;
        this.restComment = 0;
      }
    },
    // 添加评论 如果超过150条就将前50条删除
    addComment(data) {
      if (this.list.length >= 150) {
        this.list.splice(0, 50);
      }
      this.list.push(data);
      this.$nextTick(() => {
        this.renderComment();
      });
    },
    // 渲染评论
    renderComment() {
      const listHight = this.listDom.offsetHeight;
      const diff = listHight - this.wrapperHeight; // 列表高度与容器高度差值
      const top = this.wrapperDom.scrollTop; // 列表滚动高度
      if (diff - top < this.listDom.lastElementChild.offsetHeight*1.5) {
        if (diff > 0) {
          if (this.isBindScrolled) {
            this.isBindScrolled = false;
            this.wrapperDom.removeEventListener("scroll", this.addScroll);
          }
          this.wrapperDom.scrollTo({
            top: diff + 10,
            left: 0,
            behavior: "smooth"
          });
          this.restNums = 0;
        }
      } else {
        ++this.restNums;
        if (!this.isBindScrolled) {
          this.isBindScrolled = true;
          this.wrapperDom.addEventListener("scroll", this.addScroll);
        }
      }
      this.restComment = this.restNums >= 99 ? "99+" : this.restNums;
    },
    // 滚动到底部
    scrollBottom() {
      this.restNums = 0; // 清除剩余消息
      this.restComment = this.restNums;
      this.wrapperDom.scrollTo({
        top: this.listDom.offsetHeight,
        left: 0,
        behavior: "smooth"
      });
    }
  }
};
</script>
<style scoped>
.barrage{
  width: 195px;
  overflow: hidden;
}
.comment {
  width: 200px;
  height: 124px;
  position: relative;
}
.comment-wrap {
  width: 200px;
  height: 124px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.comment-wrap li {
  width: 190px;
  text-align: left;
  /* line-height: 30px; */
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.3);
  margin-top: 5px;
  border-radius: 15px;
  color: #fff;
}
.rest-nums {
  position: absolute;
  height: 24px;
  line-height: 24px;
  color: #f00;
  border-radius: 15px;
  padding: 0 15px;
  bottom: 10px;
  background: #fff;
  font-size: 14px;
  left: 10px;
}
</style>

2.barrageToll.js

/**
 * @desc 函数防抖
 * @param {需要防抖的函数} func
 * @param {延迟时间} wait
 */
export function debounce(func, wait = 500) {
    // 缓存一个定时器id
    let timer = 0;
    // 这里返回的函数是每次用户实际调用的防抖函数
    // 如果已经设定过定时器了就清空上一次的定时器
    // 开始一个新的定时器，延迟执行用户传入的方法
    return function (...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(this, args)
        }, wait)
    }
}

/**
 * @desc 是否滚到到容器底部
 * @param {滚动容器} ele 
 * @param {容器高度} wrapHeight 
 */
export function isScrollBottom(ele, wrapHeight, threshold = 30) {
    const h1 = ele.scrollHeight - ele.scrollTop;
    const h2 = wrapHeight + threshold;
    const isBottom = h1 <= h2;
    return isBottom;
}