<template>
<div class="container">
<div
class="btn bg-[#f50] px-[10px] w-[50px] cursor-pointer"
@click="addComent"
>
添加评论 {{ commentList.length }} --{{ restComment }}
</div>
<div class="rest-nums" v-show="restComment" @click="scrollBottom">
{{ restComment }}条新消息
</div>
<div class="comment-wrap" ref="wrapper">
<div class="list" ref="list">
<div class="item" v-for="item in commentList" :key="item.id">
<div class="cont">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
</template>
// 新增评论
const addComent = () => {
index.value++;
if (commentList.value.length >= 50) {
commentList.value.splice(0, 10);
}
// let index = Math.floor(Math.random() * 1000);
commentList.value.push({
id: index.value,
content: `评论内容${index.value}`,
});
nextTick(() => {
renderComment();
});
};
// 渲染评论
const renderComment = () => {
const listHight = list.value.offsetHeight;
const diff = listHight - wrapperHeight.value; // 列表高度与容器高度差值
const top = wrapper.value.scrollTop; // 列表滚动高度
console.log("进入判断", diff, diff - top);
// 20为滚动条距离底部的距离,也可以根据自己的情况进行调整
if (diff - top < 20) {
if (diff > 0) {
// 当差值大于零的时候,停止监听
if (isBindScrolled.value) {
console.log("停止监听");
isBindScrolled.value = false;
wrapper.value.removeEventListener("scroll", addScroll);
}
wrapper.value.scrollTo({
top: diff + 10,
behavior: "smooth",
});
restNums.value = 0;
}
} else {
console.log("监听中", diff - top);
restNums.value++;
// 如果小于零的话,则加上监听数据
if (!isBindScrolled.value) {
isBindScrolled.value = true;
wrapper.value.addEventListener("scroll", addScroll);
}
}
restComment.value = restNums.value;
};
const addScroll = () => {
debounce(listScroll(), 200);
isBindScrolled.value = true;
};
const listScroll = () => {
const isBottom = isScrollBottom(wrapper.value, wrapper.value.clientHeight);
console.log(isBottom);
if (isBottom) {
restNums.value = 0;
restComment.value = 0;
}
};
// 添加评论 如果超过150条就将前50条删除
const scrollBottom = () => {
restNums.value = 0;
restComment.value = restNums.value;
wrapper.value.scrollTo({
top: list.value.offsetHeight,
behavior: "smooth",
});
// debounce(this.listScroll, 200);
};
const commentList = ref([
// {
// id: 1,
// content: "评论内容",
// },
]);
* {
padding: 0;
margin: 0;
}
.comment-wrap {
width: 70%;
height: 100px;
border: 1px #ccc solid;
margin: 50px 10%;
overflow-y: scroll;
position: relative;
-webkit-overflow-scrolling: touch;
.item {
color: #fff;
box-sizing: border-box;
// display: inline-block;
// margin: auto;
margin-bottom: 10px;
.cont {
background-color: #f50;
display: inline-block;
}
// width: 1;
}
}
utils里面的两个方法
/**
* @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;
}