html5代码之翻页(HTML5实现直播间评论滚动效果的代码)
类别:Web前端 浏览量:2188
时间:2021-10-16 00:11:38 html5代码之翻页
HTML5实现直播间评论滚动效果的代码直播间评论滚动效果,下划查看历史消息并停止滚动,如有新消息会出现新消息提醒,点击滚动到底部。
2.具体代码
<template> <li class="comment"> <li 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> </li> <li class="rest-nums" v-show="restComment" @click="scrollBottom">{{restComment}}条新消息</li> </li> </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直播间评论滚动内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
标签:
您可能感兴趣
- mysql怎么删除用户操作(解决mysql删除用户 bug的问题)
- dedecms内容页模板调用不成功(织梦dedecms循环调用多级子栏目如二级栏目下三级栏目)
- python 循环遍历新方法(python for 循环获取index索引的方法)
- sqlserver2019使用教程图文(SQLServer2019 数据库环境搭建与使用的实现)
- mysql冷热数据分离方案(MySQL中使用流式查询避免数据OOM)
- kalilinux安装到u盘教程学习(kali安装docker和portainer的配置方法)
- sqlserver 高级查询(SQL Server2019数据库之简单子查询的具有方法)
- IQueryable与IEnumberable的区别
- nginx反向代理spring boot(Nginx+SpringBoot实现负载均衡的示例)
- jquery deferred对象
- python函数调用传递数组数据(python调用c++传递数组的实例)
- dedecms系统参数设置(织梦dedecms首页调用指定栏目内容的标签详解)
- mysql怎么创建联合索引(mysql的联合索引复合索引的实现)
- tftp服务器怎么设置(TFTP服务器是什么意思?)
- extjs XTemplate的实例
- oracle中rownum和row_number()
- 菲律宾特产(菲律宾特产最值得买回国)
- 越南特产(越南特产首饰)
- TVB负评王连续挑战警察角色《使徒行者3》中将饰演卧底(TVB负评王连续挑战警察角色使徒行者3中将饰演卧底)
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
热门推荐
- python获取股票每天k线(使用PyQtGraph绘制精美的股票行情K线图的示例代码)
- pythonflask怎么设置(python flask安装和命令详解)
- 常见的php五大运行模式详解(php设计模式之职责链模式定义与用法经典示例)
- php数据库怎么获得表单(php如何把表单内容提交到数据库)
- sqlserver追加主键(sqlserver主键自增的实现示例)
- jq控制css样式(css3模拟jq点击事件的实例代码)
- mysql参数说明(MySQL中你可能忽略的COLLATION实例详解)
- 什么是mongodb 固定集合
- dedecms模板特点(在Dedecms下面生成Google Sitemap的方法)
- 前端轮播图效果(AmazeUI图片轮播效果的示例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9