mirror of
https://github.com/LC044/WeChatMsg
synced 2025-02-23 03:22:17 +08:00
修复了页面滚动上的问题,现在可以直接一直下拉到底了,当然通过分页器分页也是可选的
This commit is contained in:
parent
1565f0ccc7
commit
3568c5d6b3
@ -1080,11 +1080,16 @@ html_end = '''
|
|||||||
|
|
||||||
const itemsPerPage = 100; // 每页显示的元素个数
|
const itemsPerPage = 100; // 每页显示的元素个数
|
||||||
let currentPage = 1; // 当前页
|
let currentPage = 1; // 当前页
|
||||||
var reachedBottom = false; // 到达底部的标记
|
var reachedBottom = false; // 到达底部的标记
|
||||||
|
var lastScrollTop = 0;
|
||||||
function renderPage(page) {
|
function renderPage(page) {
|
||||||
reachedBottom = false;
|
|
||||||
const container = document.getElementById('chat-container');
|
const container = document.getElementById('chat-container');
|
||||||
container.innerHTML = ''; // 清空容器
|
if (!reachedBottom) {
|
||||||
|
container.innerHTML = ''; // 清空容器
|
||||||
|
lastScrollTop = 0;
|
||||||
|
} else {
|
||||||
|
reachedBottom = false;
|
||||||
|
}
|
||||||
|
|
||||||
// 计算当前页应该显示的元素范围
|
// 计算当前页应该显示的元素范围
|
||||||
const startIndex = (page - 1) * itemsPerPage;
|
const startIndex = (page - 1) * itemsPerPage;
|
||||||
@ -1141,7 +1146,7 @@ var reachedBottom = false; // 到达底部的标记
|
|||||||
return messageAudioTag;
|
return messageAudioTag;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 从数据列表中取出对应范围的元素并添加到容器中
|
// 从数据列表中取出对应范围的元素并添加到容器中
|
||||||
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
|
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
|
||||||
const message = chatMessages[i];
|
const message = chatMessages[i];
|
||||||
if (i == startIndex) { // 判断一下在页面顶部多加一个时间
|
if (i == startIndex) { // 判断一下在页面顶部多加一个时间
|
||||||
@ -1249,7 +1254,7 @@ var reachedBottom = false; // 到达底部的标记
|
|||||||
}
|
}
|
||||||
chatContainer.appendChild(messageElement);
|
chatContainer.appendChild(messageElement);
|
||||||
}
|
}
|
||||||
document.querySelector("#chat-container").scrollTop = 0;
|
document.querySelector("#chat-container").scrollTop = lastScrollTop;
|
||||||
updatePaginationInfo();
|
updatePaginationInfo();
|
||||||
refreshMediaListener();
|
refreshMediaListener();
|
||||||
}
|
}
|
||||||
@ -1287,22 +1292,22 @@ var reachedBottom = false; // 到达底部的标记
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function checkScroll() {
|
function checkScroll() {
|
||||||
var chatContainer = document.getElementById("chat-container");
|
var chatContainer = document.getElementById("chat-container");
|
||||||
|
|
||||||
// 检查滚动条是否滑到底部
|
// 检查滚动条是否滑到底部
|
||||||
if (chatContainer.scrollHeight - chatContainer.scrollTop === chatContainer.clientHeight) {
|
if (chatContainer.scrollHeight - chatContainer.scrollTop - 10 <= chatContainer.clientHeight) {
|
||||||
// 如果滚动条在底部
|
// 如果滚动条在底部
|
||||||
if (!reachedBottom) {
|
if (!reachedBottom) {
|
||||||
// 设置标记并返回
|
// 设置标记并返回
|
||||||
reachedBottom = true;
|
reachedBottom = true;
|
||||||
return;
|
lastScrollTop = chatContainer.scrollTop;
|
||||||
}
|
}
|
||||||
else{
|
if (reachedBottom) {
|
||||||
nextPage();
|
nextPage();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// 初始化页面
|
// 初始化页面
|
||||||
renderPage(currentPage);
|
renderPage(currentPage);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user