直播评论可以用html,网页制作HTML5实现直播间评论滚动效果的代码
直播间评论滚动效果,下划查看历史消息并停止滚动,如有新消息会出现新消息提醒,点击滚动到底部。
2.具体代码
{{item.name}}:
{{item.content}}
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"
});
}
}
};
*{
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;
}
用的的两个工具函数
/**
* @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,网页制作HTML5实现直播间评论滚动效果的代码相关推荐
- html5 实现游戏直播,网页制作HTML5播放实现rtmp流直播
最近在做一个直播推流的功能,想自己写个网页进行直播尝试一下. 然后网上试了各种教程都没成功,下面说下遇到的几个坑. 1.首先通过obs进行推流,服务器是:rtmp://192.168.0.221/li ...
- html简单个人网页制作 HTML5+CSS大作业——程序员个人简历设计(5页)
HTML5+CSS大作业--程序员个人简历设计(5页) 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
- HTML5七夕情人节表白网页制作【JS烟花表白】HTML+CSS+JavaScript 烟花表白代码 html烟花告白源码
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- html如何制作滑块,网页制作html5实现滑块功能之type=quot;rangequot;属性-建站-建站教程-建站方法-米云建站 - 米云问答...
html5实现滑块功能之type="range"属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range. 2.感觉挺有意思,就做了一个 ...
- html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- 米云影视html5播放器,网页制作HTML5自定义视频播放器源码
video对象 兼容性写法 您的浏览器不支持,请升级您的浏览器 video 标签 width height autoplay muted poster带有预览图(海报图片)的视频播放器 选中video ...
- html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- web前端期末大作业:JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 网页制作中最有用的免费Ajax和JavaScript代码库
本文中,小编整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messenger 它是最流行和常用的Ajax代码解决 ...
- HTML+CSS网页制作:一个简易美观的登录页面实例代码
效果: 我们可以将以下代码.复制粘贴到菜鸟教程或者其他可以在线运行代码的网站.就可以在线调试预览代码了: 菜鸟教程在线编辑器https://www.runoob.com/try/try.php?fil ...
最新文章
- vi/vim的选中/复制/粘贴命令
- .axf文件_干货!STM32晶振的更改,BIN文件的生成
- tensorflow常见问题
- 如何强制 .NET 程序以 管理员模式 运行 ?
- esrgan_ESRGAN: Enhanced Super-Resolution Generative Adversarial Networks【阅读笔记】
- datetime方法
- IOS精品源码,仿探探UIButton封装iOS提示弹框迅速引导页自定义导航栏
- Python-Day1 数据类型
- 【FFMPE系列】之FFMPEG常用命令
- iOS多线程: pthread、NSThread
- android自动化(appium)
- KITTI激光雷达点云解析与图像反投影
- 基于rdf的php编程,RDF 简介
- 你还为数学建模模型代码实现而烦恼吗?一文带你实践30多种常用模型python代码
- 微信小程序开发技术预研分析报告
- html做相册浏览,ul结合CSS制作网页相册滑动浏览效果
- unity3D-learning:UI背包系统
- 算法题 - 数字游戏问题 - Python
- 联想Y480安装一键恢复
- Markdown 5分钟的语法课
热门文章
- 计算机工程与应用期刊模板,计算机工程与应用 论文模板
- rop检查_【国际高影响力文章红毯秀7月】白内障扩瞳安全性、ROP筛查新标准、45mmHg眼内灌注压...
- 读书,什么时候能改变命运
- 阿里云达摩院视觉AI介绍
- php文本安全内容敏感词检测(微信的)
- Shader山下(六)镜面高光
- 主程玩失踪,公司蒸发600w,创始人秒变打工仔(含视频)
- dns被劫持怎么办,DNS被劫持了有什么解决办法?
- android 添加日历事件,android 本地日历插入事件
- 记录一下线上高并发情况下 SimpleDateFormat 出现异常问题【项目】