mirror of
https://github.com/Cp0204/quark-auto-save.git
synced 2026-01-12 15:20:44 +08:00
优化移动端分页导航显示效果
This commit is contained in:
x1ao4
parent
62fa776ec3
commit
2283747d6c
@ -2885,6 +2885,19 @@ div.jsoneditor-treepath * {
|
||||
.pagination-settings .dropdown-toggle {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* 移动端分页按钮优化：确保不换行 */
|
||||
.pagination-controls {
|
||||
flex-wrap: nowrap !important; /* 强制不换行 */
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
|
||||
.pagination-controls::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-settings {
|
||||
|
||||
@ -5017,31 +5017,54 @@
|
||||
getVisiblePageNumbers() {
|
||||
const current = parseInt(this.historyParams.page) || 1;
|
||||
const total = parseInt(this.totalPages) || 1;
|
||||
const delta = 2; // 当前页左右显示的页码数
|
||||
// 根据屏幕宽度动态调整显示的页码数：移动端显示较少页码，桌面端显示较多页码
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const delta = isMobile ? 1 : 2; // 移动端左右各显示1个页码，桌面端左右各显示2个页码
|
||||
|
||||
// 处理特殊情况
|
||||
if (total <= 1) return [];
|
||||
|
||||
let range = [];
|
||||
|
||||
// 确定显示范围
|
||||
let rangeStart = Math.max(2, current - delta);
|
||||
let rangeEnd = Math.min(total - 1, current + delta);
|
||||
|
||||
// 调整范围，确保显示足够的页码
|
||||
if (rangeEnd - rangeStart < delta * 2) {
|
||||
if (current - rangeStart < delta) {
|
||||
// 当前页靠近开始，扩展结束范围
|
||||
rangeEnd = Math.min(total - 1, rangeStart + delta * 2);
|
||||
// 移动端简化逻辑：只显示当前页附近的少数页码
|
||||
if (isMobile) {
|
||||
// 移动端：最多显示4个中间页码按钮（不包括第1页和最后1页），总共5个页码
|
||||
if (current <= 4) {
|
||||
// 当前页在前面时，显示 1, 2, 3, 4
|
||||
for (let i = 2; i <= Math.min(4, total - 1); i++) {
|
||||
range.push(i);
|
||||
}
|
||||
} else if (current >= total - 3) {
|
||||
// 当前页在后面时，显示倒数几页
|
||||
for (let i = Math.max(2, total - 3); i <= total - 1; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
} else {
|
||||
// 当前页靠近结束，扩展开始范围
|
||||
rangeStart = Math.max(2, rangeEnd - delta * 2);
|
||||
// 当前页在中间时，显示当前页前后各1页，总共3个中间页码
|
||||
range.push(current - 1);
|
||||
range.push(current);
|
||||
range.push(current + 1);
|
||||
}
|
||||
} else {
|
||||
// 桌面端保持原有逻辑
|
||||
let rangeStart = Math.max(2, current - delta);
|
||||
let rangeEnd = Math.min(total - 1, current + delta);
|
||||
|
||||
// 调整范围，确保显示足够的页码
|
||||
if (rangeEnd - rangeStart < delta * 2) {
|
||||
if (current - rangeStart < delta) {
|
||||
// 当前页靠近开始，扩展结束范围
|
||||
rangeEnd = Math.min(total - 1, rangeStart + delta * 2);
|
||||
} else {
|
||||
// 当前页靠近结束，扩展开始范围
|
||||
rangeStart = Math.max(2, rangeEnd - delta * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成页码数组
|
||||
for (let i = rangeStart; i <= rangeEnd; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成页码数组
|
||||
for (let i = rangeStart; i <= rangeEnd; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
|
||||
return range;
|
||||
@ -6273,31 +6296,54 @@
|
||||
getVisibleFolderPageNumbers() {
|
||||
const current = parseInt(this.fileManager.currentPage) || 1;
|
||||
const total = parseInt(this.fileManager.totalPages) || 1;
|
||||
const delta = 2; // 当前页左右显示的页码数
|
||||
// 根据屏幕宽度动态调整显示的页码数：移动端显示较少页码，桌面端显示较多页码
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const delta = isMobile ? 1 : 2; // 移动端左右各显示1个页码，桌面端左右各显示2个页码
|
||||
|
||||
// 处理特殊情况
|
||||
if (total <= 1) return [];
|
||||
|
||||
let range = [];
|
||||
|
||||
// 确定显示范围
|
||||
let rangeStart = Math.max(2, current - delta);
|
||||
let rangeEnd = Math.min(total - 1, current + delta);
|
||||
|
||||
// 调整范围，确保显示足够的页码
|
||||
if (rangeEnd - rangeStart < delta * 2) {
|
||||
if (current - rangeStart < delta) {
|
||||
// 当前页靠近开始，扩展结束范围
|
||||
rangeEnd = Math.min(total - 1, rangeStart + delta * 2);
|
||||
// 移动端简化逻辑：只显示当前页附近的少数页码
|
||||
if (isMobile) {
|
||||
// 移动端：最多显示4个中间页码按钮（不包括第1页和最后1页），总共5个页码
|
||||
if (current <= 4) {
|
||||
// 当前页在前面时，显示 1, 2, 3, 4
|
||||
for (let i = 2; i <= Math.min(4, total - 1); i++) {
|
||||
range.push(i);
|
||||
}
|
||||
} else if (current >= total - 3) {
|
||||
// 当前页在后面时，显示倒数几页
|
||||
for (let i = Math.max(2, total - 3); i <= total - 1; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
} else {
|
||||
// 当前页靠近结束，扩展开始范围
|
||||
rangeStart = Math.max(2, rangeEnd - delta * 2);
|
||||
// 当前页在中间时，显示当前页前后各1页，总共3个中间页码
|
||||
range.push(current - 1);
|
||||
range.push(current);
|
||||
range.push(current + 1);
|
||||
}
|
||||
} else {
|
||||
// 桌面端保持原有逻辑
|
||||
let rangeStart = Math.max(2, current - delta);
|
||||
let rangeEnd = Math.min(total - 1, current + delta);
|
||||
|
||||
// 调整范围，确保显示足够的页码
|
||||
if (rangeEnd - rangeStart < delta * 2) {
|
||||
if (current - rangeStart < delta) {
|
||||
// 当前页靠近开始，扩展结束范围
|
||||
rangeEnd = Math.min(total - 1, rangeStart + delta * 2);
|
||||
} else {
|
||||
// 当前页靠近结束，扩展开始范围
|
||||
rangeStart = Math.max(2, rangeEnd - delta * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成页码数组
|
||||
for (let i = rangeStart; i <= rangeEnd; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成页码数组
|
||||
for (let i = rangeStart; i <= rangeEnd; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
|
||||
return range;
|
||||
@ -6864,34 +6910,54 @@
|
||||
getVisibleFolderPageNumbers() {
|
||||
const current = parseInt(this.fileManager.currentPage) || 1;
|
||||
const total = parseInt(this.fileManager.totalPages) || 1;
|
||||
const delta = 2; // 当前页左右显示的页码数
|
||||
// 根据屏幕宽度动态调整显示的页码数：移动端显示较少页码，桌面端显示较多页码
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const delta = isMobile ? 1 : 2; // 移动端左右各显示1个页码，桌面端左右各显示2个页码
|
||||
|
||||
// 处理特殊情况
|
||||
if (total <= 1) return [];
|
||||
if (total <= 5) {
|
||||
return Array.from({ length: total - 2 }, (_, i) => i + 2);
|
||||
}
|
||||
|
||||
let range = [];
|
||||
|
||||
// 确定显示范围
|
||||
let rangeStart = Math.max(2, current - delta);
|
||||
let rangeEnd = Math.min(total - 1, current + delta);
|
||||
|
||||
// 调整范围，确保显示足够的页码
|
||||
if (rangeEnd - rangeStart < delta * 2) {
|
||||
if (current - rangeStart < delta) {
|
||||
// 当前页靠近开始，扩展结束范围
|
||||
rangeEnd = Math.min(total - 1, rangeStart + delta * 2);
|
||||
// 移动端简化逻辑：只显示当前页附近的少数页码
|
||||
if (isMobile) {
|
||||
// 移动端：最多显示4个中间页码按钮（不包括第1页和最后1页），总共5个页码
|
||||
if (current <= 4) {
|
||||
// 当前页在前面时，显示 1, 2, 3, 4
|
||||
for (let i = 2; i <= Math.min(4, total - 1); i++) {
|
||||
range.push(i);
|
||||
}
|
||||
} else if (current >= total - 3) {
|
||||
// 当前页在后面时，显示倒数几页
|
||||
for (let i = Math.max(2, total - 3); i <= total - 1; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
} else {
|
||||
// 当前页靠近结束，扩展开始范围
|
||||
rangeStart = Math.max(2, rangeEnd - delta * 2);
|
||||
// 当前页在中间时，显示当前页前后各1页，总共3个中间页码
|
||||
range.push(current - 1);
|
||||
range.push(current);
|
||||
range.push(current + 1);
|
||||
}
|
||||
} else {
|
||||
// 桌面端保持原有逻辑
|
||||
let rangeStart = Math.max(2, current - delta);
|
||||
let rangeEnd = Math.min(total - 1, current + delta);
|
||||
|
||||
// 调整范围，确保显示足够的页码
|
||||
if (rangeEnd - rangeStart < delta * 2) {
|
||||
if (current - rangeStart < delta) {
|
||||
// 当前页靠近开始，扩展结束范围
|
||||
rangeEnd = Math.min(total - 1, rangeStart + delta * 2);
|
||||
} else {
|
||||
// 当前页靠近结束，扩展开始范围
|
||||
rangeStart = Math.max(2, rangeEnd - delta * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成页码数组
|
||||
for (let i = rangeStart; i <= rangeEnd; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成页码数组
|
||||
for (let i = rangeStart; i <= rangeEnd; i++) {
|
||||
range.push(i);
|
||||
}
|
||||
|
||||
return range;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user