HTML5实现直播间评论滚动效果的代码
程序员文章站
2022-06-25 17:37:51
这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 20-05-27...
直播间评论滚动效果,下划查看历史消息并停止滚动,如有新消息会出现新消息提醒,点击滚动到底部。
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直播间评论滚动内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: 在Linux下掌握arm和操作系统(2)--开发环境最小系统
下一篇: Stm32cube入门2