HTML5实现直播间评论滚动效果的代码


Posted in HTML / CSS onMay 27, 2020

HTML5实现直播间评论滚动效果的代码

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

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 / CSS 相关文章推荐
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
html5拖拽应用记录及注意点
May 27 #HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 #HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 #HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 #HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 #HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 #HTML / CSS
HTML5 Blob对象的具体使用
May 22 #HTML / CSS
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
javascript常见操作汇总
2014/09/03 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
用python实现的线程池实例代码
2018/01/06 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
会计职业生涯规划书
2014/01/13 职场文书
品牌服务方案
2014/06/03 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
课外活动实习计划
2015/01/19 职场文书
学校会议通知范文
2015/04/15 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python