目录
二、config接收文件处理数据、单页30条、添加作品名称、添加sort序号递增
三、main.js在loaded函数添加新的渲染机制、添加目录点击跳转翻页功能
四、有需要3D电子相册改造源码、添加目录或者新功能的、关注收藏点赞联系我
一、效果图
二、config接收文件处理数据、单页30条、添加作品名称、添加sort序号递增
let authors = filteredArr.slice(1).map((item) => item.name);
const chunkSize = 30; // 定义每个 chunk 的大小
let chunks = Math.ceil(authors.length / chunkSize); // 计算 chunk 的数量
let indexCounter = 1; // 初始化序号计数器
for (let i = 0; i < chunks; i++) {
let start = i * chunkSize;
let end = start + chunkSize;
if (end > authors.length) {
end = authors.length;
}
let chunk = authors.slice(start, end);
let chunkWithIndex = chunk.map((name) => {
let paddedIndex = indexCounter.toString().padStart(2, '0');
indexCounter++; // 递增序号计数器
return { name, index: paddedIndex };
});
let obj = {
coverState: true,
directoryState: true,
id: Math.random().toString(),
magazineName: "亚洲水墨画大师作品收录专辑赏析",
url:
"//images.artvrpro.com/image%2F1683538180726-d0a078cbcb2eff4ed6b2095e564253ae.jpeg?" +
Math.random(),
authorNamesList: chunkWithIndex,
};
if (i >= 1) {
// 超过30条数据,对当前页数据进行排序
obj.authorNamesList.sort((a, b) => a.index.localeCompare(b.index));
}
filteredArr.splice(i + 1, 0, { ...obj });
}
三、main.js在loaded函数添加新的渲染机制、添加目录点击跳转翻页功能
if (page.directoryState) {
// 创建目录容器
let directoryContainer = $("<div></div>").css({
display: "flex",
flexDirection: "column",
marginTop: "100px",
marginLeft: "70px",
});
// 创建目录标题
let directoryTitle = $("<p>目录</p>").css({
color: "#000000",
"font-size": "45px",
fontWeight: "bold", // 加粗
});
// 创建文本节点
let contentsText = $("<p>CONTENTS</p>").css({
color: "#000000",
"font-size": "16px",
});
// 将目录标题和文本节点插入到目录容器中
directoryContainer.append(directoryTitle, contentsText);
// 创建作者列表容器
let authorContainer = $("<div></div>").css({
display: "flex",
marginTop: "50px",
});
// 创建两个作者列表容器
let leftAuthorContainer = $("<div></div>").css({
display: "flex",
flexDirection: "column",
marginRight: "100px",
marginTop: "10px",
});
let rightAuthorContainer = $("<div></div>").css({
display: "flex",
flexDirection: "column",
marginTop: "8px",
});
/** 主要功能是将作者列表分成两排并显示在页面上。具体实现过程如下:
1.首先定义了一个变量midIndex,表示左右容器都要显示的作者数量,这里假设为15个。
2.接着定义了两个变量leftCount和rightCount,分别表示左右容器已经显示的作者数量,初始值都为0。
3.然后从page对象中取出作者列表authorList,只取前30个作者。
4.遍历作者列表,对每个作者名字进行处理,如果长度超过30,则截取前30个字符并在末尾加上省略号;如果不包含《》符号,则在前后加上《》符号。然后创建一个文本节点authorText,并设置样式和点击事件。
5.判断当前作者是在左容器还是右容器中显示,如果是在左容器中,则判断左容器已经显示的作者数量是否小于15,如果是,则将authorText插入到左容器中,并将leftCount加1;如果不是,则判断右容器已经显示的作者数量是否小于15,如果是,则将authorText插入到右容器中,并将rightCount加1。
6.如果左右容器都已经显示了15个作者,则退出循环。
7.最后将左右容器插入到作者列表容器authorContainer中,并将authorContainer插入到目录容器directoryContainer中,最后将directoryContainer插入到tmpContent容器中,完成作者列表的显示/** */
// 分成两排
let midIndex = 15; // 假设左右容器都要显示15个作者
let leftCount = 0;
let rightCount = 0;
let authorList = page.authorNamesList;
// 遍历作者列表,创建文本节点并插入到对应的容器中
for (let i = 0; i < authorList.length; i++) {
let authorName = authorList[i].name;
let sortIndex = authorList[i].index;
authorName =
authorName.replace(/[\[\]"]/g, "").slice(0, 30) +
(authorName.length > 30 ? "..." : "");
let newName =
authorName &&
!authorName.includes("《") &&
authorName &&
!authorName.includes("》")
? `《${authorName}》`
: authorName;
let authorText = $(
"<p>" + sortIndex + "." + newName + "</p>"
).css({
color: "#000000",
"font-size": "16px",
marginBottom: "10px",
cursor: "pointer",
zIndex: "99999",
});
if (i < midIndex && leftCount < 15) {
leftAuthorContainer.append(authorText);
leftCount++;
} else if (rightCount < 15) {
rightAuthorContainer.append(authorText);
rightCount++;
}
if (leftCount >= 15 && rightCount >= 15) {
// 如果左右容器都显示了15个作者,则退出循环
break;
}
authorText.on("click", () => {
const coverCount = 2;
const pageCount = global.fliphtml5_pages.reduce((count, page) => {
if (page.coverState) {
return count + 1;
}
return count;
}, 0);
const totalPageCount = coverCount + pageCount;
const index = parseInt(sortIndex, 10)-1; // 将字符串转换为数字
console.log(index,totalPageCount);
gotoPageFun(index + totalPageCount);
});
}
// 将作者列表容器插入到目录容器中
authorContainer.append(leftAuthorContainer, rightAuthorContainer);
directoryContainer.append(authorContainer);
// 将目录容器插入到tmpContent容器中
that_.tmpContent.append(directoryContainer);
}