影视详情页

介绍

影视详情页面是本项目中功能最多的页面，包含了多个组件与子页面。

目录结构

└─ pages                
   └─ movie                           # 影视
      ├─ index                        # 影视详情
      ├─ coming                       # 影视详情
      ├─ theater                      # 影视详情
      ├─ top                          # 影视详情
      ├─ today                        # 影视详情
      ├─ serial                       # 影视详情
      └─ detail                       # 影视详情
         ├─ index                     # 详情入口页面
         │	└─ components             # 详情的组件
         │     ├─ movie-info          # 顶部影视主要信息
         │     ├─ movie-rating        # 评分展示栏
         │     ├─ photo-wall          # 相册栏
         │     ├─ movie-award         # 获得奖项
         │     ├─ serial-row          # 系列
         │     ├─ movie-extra         # 影视更多资料
         │     ├─ favorite-list       # 我的收藏夹
         │     ├─ information         # 影视更多信息
         │     ├─ movie-bar           # 底部工具栏
         │     └─ skeleton            # 骨架屏
         ├─ cast                      # 演员表
         ├─ role                      # 角色表
         ├─ serial                    # 系列列表
         ├─ article                   # 文章资讯
         ├─ award                     # 荣获奖项
         ├─ company                   # 出品发行公司
         ├─ dialogue                  # 经典台词
         ├─ knowledge                 # 幕后知识
         ├─ pubdate                   # 各地上映日期
         ├─ level                     # 家长引导等级
         ├─ review                    # 影评列表
         ├─ video                     # 视频列表
         └─ rating                    # 评分页面
            ├─ create                 # 用户评分
            └─ index                  # 评分分布

头部

header 部分主要使用了全局组件 heade-scroll-bar ，其中插槽部分使用了自定义内容，详情请查看 heade-scroll-bar 使用文档。

页面优化

为优化详情页的展示速度，当用户在其它影视列表页面点击进入详情时，会将列表中该影视信息存入到 app.js 中，当然，列表中只是影视的部分信息，对应为详情的 movie-info 部分。
进入详情后，会先从 app.js 中获取该影视的信息，如果不存在（app.js 中不存在或者其影视 id 与详情页路由 id不匹配），则会全屏显示骨架屏，否则 movie-info 部分不显示骨架屏。

半页屏

小程序 page-container (opens new window)，当用户进行返回操作，关闭该容器不关闭页面。

由于一个页面中 page-container 只能存在一个，而详情页有多个场景需要弹出框，所以将 page-container 作为一个容器，在内部进行不同内容的切换。