HTML5实现直播间评论滚动效果的代码
发布时间：2020-05-27 17:24:41 作者：佚名 
我要评论
我要评论这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
直播间评论滚动效果，下划查看历史消息并停止滚动，如有新消息会出现新消息提醒，点击滚动到底部。
2.具体代码
<template>
<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>
</template>
<script>
import smoothscroll from 'smoothscroll-polyfill';
import { debounce, isScrollBottom } from '../utils/utils';
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 + "-用户名",
content: 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 < 50) {
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>
*{
padding: 0;
margin: 0;
}
.comment{
width: 70%;
height: 350px;
position: relative;
margin: 100px 0 0 20px;
}
.comment-wrap{
height: 350px;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
.comment-wrap li{
text-align: left;
line-height: 30px;
padding-left: 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>
用的的两个工具函数
/**
* @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;
}
总结
到此这篇关于HTML5实现直播间评论滚动效果的代码的文章就介绍到这了,更多相关H5直播间评论滚动内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了如何在HTML里加载摄像头，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-29
这篇文章主要介绍了基于HTML代码实现图片碎片化加载功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-23
这篇文章主要介绍了html5用video标签流式加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-05-20- 这篇文章主要介绍了HTML5 图片预加载的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-03-25
这篇文章主要介绍了传统HTML页面实现模块化加载的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-15- 这篇文章主要介绍了HTML页面缩小后显示滚动条的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-26
这篇文章主要介绍了h5页面背景图很长要有滚动条滑动效果的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-27- 这篇文章主要介绍了html+css实现滚动到元素位置显示加载动画效果,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2021-07-27
最新评论