html
<div class="container">
<div class="content scroll-my-container" ref="chatRef" @scroll="handleScroll">
<div class="chat-list" ref="chatListRef" v-if="chatListAll.length">
<chat-item
v-for="(chat, index) in chatListAll"
:key="index"
:chat="chat"
@talkContentEditSuccess="talkContentEditSuccessHandle"
@singlePlay="singlePlayHandle"
@singlePause="singlePauseHandle"
@auditSuccess="auditSuccessHandle"
></chat-item>
<div class="loading-container">
<t-loading size="small" text="加载中..." v-if="loading"></t-loading>
<div class="finish-container" v-if="finish">没有更多了</div>
</div>
</div>
<div class="no-data" v-else>- 暂无数据 -</div>
</div>
</div>
js
/**
* 处理触底加载更多
*/
const handleScroll = () => {
const container = chatRef.value;
console.log(container.scrollTop, container.clientHeight, container.scrollHeight);
if (Math.ceil(container.scrollTop + container.clientHeight) >= container.scrollHeight) {
if (!finish.value) {
pager.page++;
queryEnforceLawContent();
}
console.log('到底了');
}
};