前端-3D电子相册-添加目录(源码改造)_web前端电子相册-CSDN博客

本文链接：https://blog.csdn.net/WANGLING0108/article/details/130690165

二、config接收文件处理数据、单页30条、添加作品名称、添加sort序号递增

一、效果图

二、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);
          }