前端-3D电子相册-基础版

目录

 

一、FlipBookPlugins.js库、flipHtml5.hiSlider.js封装、可查看文件类型：img、video、通过更改源码、同时兼容图片和视频的展示、可通过ifame加载、使用postMessage传参渲染

二、react项目中跳转ifame、一定要在请求成功获取数据后再通过postMessage传参、不能同步加载、在源码的基础上添加了分页加载功能、优化源码渲染的问题

 三、效果展示图、兼容PC端、H5端

 四、点赞关注加收藏私信我发完整源码

---

一、FlipBookPlugins.js库、flipHtml5.hiSlider.js封装、可查看文件类型：img、video、通过更改源码、同时兼容图片和视频的展示、可通过ifame加载、使用postMessage传参渲染

二、react项目中跳转ifame、一定要在请求成功获取数据后再通过postMessage传参、不能同步加载、在源码的基础上添加了分页加载功能、优化源码渲染的问题

async getAlbumArtworkList() {
    const queryString = window.location.search;
    const decodedParams = decodeURIComponent(queryString);
    const urlParams = new URLSearchParams(decodedParams);
    const id = urlParams.get('id');
    const pageNumber = urlParams.get('pageNumber');
    const pageSize = urlParams.get('pageSize');
    const userId = urlParams.get('userId');    
    try {
      const [res] = await Promise.all([
        request({
          url: api.getAlbumArtworkList,
          data: {
            id,
            pageNumber,
            pageSize,
            userId,
          },
        }),
      ]);
      this.isRequest = false;
      const list = res.data.list;
      const idUrlArrayWithPrefix = this.buildIdUrlArrayWithPrefix(list);
      this.encodedUrls = encodeURIComponent(
        JSON.stringify(idUrlArrayWithPrefix)
      );
      //请求数据后再去跳转ifame
      this.ifameState = true;
      //ifame传参
      const iframe = document.getElementById("my-iframe");
      if (iframe) {
        iframe.addEventListener("load", () => {
          iframe.contentWindow.postMessage(this.encodedUrls, "*");
        });
      }
    } catch (error) {
      this.isRequest = false;
      stores.Frame.error(error.message);
    }
  }

  buildIdUrlArrayWithPrefix(list) {
    const queryString = window.location.search;
    const decodedParams = decodeURIComponent(queryString);
    const urlParams = new URLSearchParams(decodedParams);
    const id = urlParams.get("id");
    const cover = urlParams.get("cover");
    return list.reduce(
      (acc, obj) => {
        const { url, id: objId, cover: objCover } = obj;
        const isVideo = url.endsWith(".mp4");
        const idUrlWithPrefix = {
          url: utils.pictureThumb(isVideo ? objCover : url, !isVideo),
          id: objId,
          ...(isVideo && { videoUrl: utils.pictureThumb(url, false) }),
        };
        return [...acc, idUrlWithPrefix];
      },
      [{ url: utils.pictureThumb(cover), id }]
    );
  }

 三、效果展示图、兼容PC端、H5端

 

 

 

 四、点赞关注加收藏私信我发完整源码