HTML5完成直播间间评价翻转实际效果的编码

日期:2021-02-22 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

直播间间评价翻转实际效果,下划查询历史时间信息并终止翻转,如有新信息会出現新信息提示,点一下翻转究竟部。

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();
	    });
	},
	// 3D渲染评价
        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) {
    // 缓存文件1个定时执行器id
    let timer = 0;
    // 这里回到的涵数是每次客户具体启用的防抖涵数
    // 假如早已设置过定时执行器了就清空上1次的定时执行器
    // 刚开始1个新的定时执行器,延迟时间实行客户传入的方式
    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直播间间评价翻转內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:HTML5 FileReader目标的实际应用方式 返回下一篇:没有了