HTML5如何实现直播间评论滚动效果 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关HTML5如何实现直播间评论滚动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

直播间评论滚动效果,下划查看历史消息并停止滚动,如有新消息会出现新消息提醒,点击滚动到底部。

2。具体代码

& lt; template> 　　,,,& lt; div 类=癱omment"比; 　　,,,,& lt; div 类=癱omment-wrap", ref=皐rapper"比; 　　,,,& lt; ul 类=發ist", ref=發ist"比; 　　,,,,,,,,,,,& lt; li v=癷tem list",拷贝:关键=癷tem.id"比; 　　,,,,,,,& lt; span 类=皀ame"在{{item.name}}: & lt;/span> 　　,,,,,,,& lt; span 类=癱ontent"在{{item.content}} & lt;/span> 　　,,,,,,,,,,,& lt;/li> 　　,,,,,,,,,,,& lt;/ul> 　　,,,,& lt;/div> 　　,,,,& lt; div 类=皉est-nums", v-show=皉estComment", @click=皊crollBottom"在{{restComment}}条新消息& lt;/div> 　　,,,& lt;/div> 　　& lt;/template> & lt; script> 　　import smoothscroll 得到& # 39;smoothscroll-polyfill& # 39;; 　　import {防反跳的不同之处是,isScrollBottom },得到& # 39;. ./跑龙套/跑龙套# 39;; 　　smoothscroll.polyfill();,//,移动端scrollTo 行为:,“smooth"动画失效的polyfill 　　export default { 　　数据才能(),{ 　　,,,return { 　　,,,,,,,:列表,[], 　　,,,,,,,restComment:, 0, 　　,,,,,,,restNums:, 0, 　　,,,,,,,wrapperDom:,空, 　　,,,,,,,listDom:,空, 　　,,,,,,,wrapperHeight: 0 　　,,,}; 　　,,}, 　　安装(),{才能　　,,,,this.initDom (); 　　,,,,//,ajax…… 　　,,,,const data =, new 数组(20).fill (& # 39; & # 39;); 　　,,,,this.queue(数据); 　　,,,,setTimeout((),=祝辞,{ 　　,,,,,,,,const list =, new 数组(10).fill (& # 39; & # 39;); 　　,this.queue(列表); 　　,,,,,},,30000); 　　,,}, 　　方法:才能,{ 　　,,,,,initDom (), { 　　,,,,,,,,,this.wrapperDom =,。refs.wrapper美元; 　　,,,,,,,,,this.listDom =,。refs.list美元; 　　,,,,,,,,,this.wrapperHeight =, this.wrapperDom.offsetHeight; 　　,,,,,}, 　　,,,,,addTimeOut(选择),{ 　　,,,,,,return new 承诺((解决,,拒绝),=祝辞,{ 　　,,,,setTimeout((),=祝辞,{ 　　,,,,this.addComment(选择); 　　,,,,解决() 　　,,,,},,500); 　　,,,,,,}); 　　,,,,,,},//,队列添加消息　　async 队列(数据),{ 　　,,,,,,,for (let 小姐:=,0;,小姐:& lt;, data.length;,我+ +),{ 　　,,,,const opt =, { 　　,,,,名称:小姐:+,“——用户名“, 　　,,,,内容:小姐:+,“——评论内容“, 　　,,,,id: Date.now () 　　,,,,} 　　,,,,await this.addTimeOut(选择); 　　,,,,,,,} 　　}, 　　,,,,,,,addScroll (), { 　　,,,,,,,,,,,防反跳(this.listScroll, 200); 　　,,,,,,,,,,,this.isBindScrolled =,真的; 　　,,,,,,,}, 　　,,,,,,,listScroll (), { 　　,,,,,,,,,,,const ele =, this.wrapperDom; 　　,,,,,,,,,,,const isBottom =, isScrollBottom(避署,ele.clientHeight); 　　,,,,,,,,,,,if (isBottom), { 　　时间=this.restNums 0; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null