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

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: iiiii*i + “-用户名”,

content: iiiii*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”

});

}

}

};

2.barrageToll.js

/**

• @desc 函数防抖

• @param {需要防抖的函数} func

• @param {延迟时间} wait

*/

export function debounce(func, wait = 500) {

// 缓存一个定时器id

let timer = 0;

// 这里返回的函数是每次用户实际调用的防抖函数

// 如果已经设定过定时器了就清空上一次的定时器

// 开始一个新的定时器，延迟执行用户传入的方法