资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

roland_reed / 3499人阅读

摘要：详情页面制作本文配套视频地址开始前请把分支中的目录导入微信开发工具这一章节中，主要介绍详情页的页面制作过程首先看一下我们最终要展示的页面页面结构大体分为三部分，也是最常见的布局方式头部中间体尾部。

详情 - 页面制作 
</>复制代码 
  1. 本文配套视频地址：
    https://v.qq.com/x/page/o0555...
</>复制代码 
  1. 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具  
    这一章节中，主要介绍详情页的页面制作过程

首先看一下我们最终要展示的页面

页面结构大体分为三部分，也是最常见的布局方式：头部、中间体、尾部。最顶部的是页面 title，也就是标题，如果是一般的页面，我们只需要在 detail.json 中增加如下配置即可：


"navigationBarTitleText": "Quora精选：为什么聪明人总能保持冷静"

但我们制作的详情页面信息是随着文章内容一直变化的，所以需要在代码中多带带处理，就不需要在 detail.json 中添加
这里，我们先制作出：头部和尾部。中间的内容部分，会由 parse.js 解析文章数据生成。

开始之前，我们先修改 app.wxss 文件，引入需要用到的公用样式表和第三方样式

</>复制代码 
  1. @import "./styles/base.wxss";
  2. @import "./lib/wxParse/wxParse.wxss";
  3. .green{
  4.     color: #26b961;
  5. }
  6. page{
  7.     height: 100%;
  8.     background-color: #f8f8f8;
  9. }
Step 1. 页面准备

由于文章需要上下滚动，我们采用 scroll-view 组件来包括整个页面内容

</>复制代码 
  3.

scroll-view 组件，相当于我们在常规的 div 标签上增加了滚动功能并进行封装

然后调整下页面的高度和背景色

</>复制代码 
  1.   /* detail.css */
  2.   page {
  3.     background: #fbfbfb;
  4.     height: 100%
  5.   }
  6.   .root-wrap {
  7.     height: 100%
  8.   }
Step 2. 页面头部制作

头部包含三块内容：大标题、左浮动显示作者、右浮云显示日期，制作如下：

</>复制代码 
  1.   
  2.   
  3.     
  4.       
  5.         Quora精选：为什么聪明人总能保持冷静
  6.         
  7.           哈利波特
  8.           2017/06/27
  9.         
  10.         
  11.       
  12.     
  13.


对应样式文件，注意： fl(float:left)、 fr(float:right)、 cf(clear:float) 三个样式都是在 base.wxss 中设置的全局样式

</>复制代码 
  1.   /* detail.css */
  2.   page {
  3.     background: #fbfbfb;
  4.     height: 100%
  5.   }
  6.   .root-wrap {
  7.     height: 100%
  8.   }
  9.   .wrapper {
  10.     padding-bottom: 96rpx
  11.   }
  12.   .wrapper .top-img {
  13.     width: 100%;
  14.     height: 470rpx;
  15.     vertical-align: top
  16.   }
  17.   .wrapper .info {
  18.     padding: 0 36rpx
  19.   }
  20.   .wrapper .info-title {
  21.     padding: 40rpx 0;
  22.     line-height: 60rpx;
  23.     font-size: 44rpx;
  24.     font-weight: 500;
  25.     color: #333
  26.   }
  27.   .wrapper .info-desc {
  28.     font-size: 28rpx;
  29.     line-height: 30rpx;
  30.     color: #c1c1c1
  31.   }
  32.   .wrapper .info-desc-author {
  33.     max-width: 65%;
  34.     text-overflow: ellipsis;
  35.     white-space: nowrap;
  36.     overflow: hidden
  37.   }
  38.   .wrapper .info-line {
  39.     margin-top: 24rpx
  40.   }
Step 3. 页面尾部制作 
</>复制代码 
  1. 页尾类似于于菜单导航功能，用户可以进入 下一篇 或 返回 列表，并且当页面滚动时候，固定在底部不动

修改页面 detail.html

</>复制代码 
  1.   
  2.   
  3.     
  4.       
  5.         
  6.       
  7.       
  8.       
  9.         
  10.       
  11.     
  12.

修改样式表

</>复制代码 
  1.   /* detail.css 增加以下样式内容 */
  2.   .wrapper .footbar {
  3.     position: fixed;
  4.     left: 0;
  5.     bottom: 0;
  6.     width: 100%;
  7.     height: 96rpx;
  8.     line-height: 96rpx;
  9.     background: #fff;
  10.     font-size: 32rpx;
  11.     color: #333
  12.   }
  13.   .wrapper .footbar-back,.wrapper .footbar-share {
  14.     position: absolute;
  15.     width: 96rpx;
  16.     height: 96rpx;
  17.     bottom: 0;
  18.     z-index: 2
  19.   }
  20.   .wrapper .footbar .icon {
  21.     position: absolute;
  22.     width: 42rpx;
  23.     height: 38rpx;
  24.     top: 30rpx
  25.   }
  26.   .wrapper .footbar-back {
  27.     left: 0
  28.   }
  29.   .wrapper .footbar-back-icon {
  30.     left: 30rpx;
  31.     background: url(https://n1image.hjfile.cn/mh/2017/06/06/1305a8ac4dc9347b59cc8c2c667122e5.png) 0 0 no-repeat;
  32.     background-size: contain
  33.   }
  34.   .wrapper .footbar-list {
  35.     left: 0
  36.   }
  37.   .wrapper .footbar-list-icon {
  38.     left: 30rpx;
  39.     background: url(https://n1image.hjfile.cn/mh/2017/06/09/1e630ac45547e6ab5260928e1d57a3c6.png) 0 0 no-repeat;
  40.     background-size: contain
  41.   }
  42.   .wrapper .footbar-btn {
  43.     text-align: center;
  44.     margin: 0 96rpx;
  45.     height: 96rpx;
  46.     line-height: 96rpx
  47.   }
  48.   .wrapper .footbar-share {
  49.     right: 0
  50.   }
  51.   .wrapper .footbar-share-icon {
  52.     right: 30rpx;
  53.     background: url(https://n1image.hjfile.cn/mh/2017/06/09/ebc3852fb865bd19182c09ca599d8ac1.png) 0 0 no-repeat;
  54.     background-size: contain
  55.   }
  56.   .wrapper .clearBtnDefault {
  57.     margin: 0;
  58.     padding: 0;
  59.     background: #fff;
  60.     border: 0;
  61.     border-radius: 0
  62.   }
  63.   .wrapper .clearBtnDefault:after {
  64.     content: "";
  65.     border: none;
  66.     border-radius: 0;
  67.     width: 0;
  68.     height: 0
  69.   }



页面尾部制作完成，下一步我们将处理中间的文章内容部分。

Step 4. 为中间的 content 内容预留位置 
</>复制代码 
  1. 完整的页面代码如下
</>复制代码 
  1.   
  2.       
  3.           
  4.             Quora精选：为什么聪明人总能保持冷静
  5.             
  6.               哈利波特
  7.               2017/06/27
  8.             
  9.             
  10.           
  11.           
  12.           
  13.               文章正文
  14.           
  15.           
  16.               
  17.                   
  18.                       
  19.                   
  20.                   
  21.                   
  22.                       
  23.                   
  24.               
  25.           
  26.       
  27.   
</>复制代码 
  1. iKcamp官网：http://www.ikcamp.com
  2. 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
    包含：文章、视频、源代码

</>复制代码 
  1. iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
【11月11号】上海iKcamp最新活动 

</>复制代码 
  1. 报名地址：http://www.huodongxing.com/ev...
  2. 与“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。
GPU云服务器 云服务器 不用编程制作微信小程序视频 vps制作微信小程序 国内第一款微信小程序 工具类微信小程序怎么制作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92003.html

相关文章

  • 微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

    摘要：详情页面制作本文配套视频地址开始前请把分支中的目录导入微信开发工具这一章节中，主要介绍详情页的页面制作过程首先看一下我们最终要展示的页面页面结构大体分为三部分，也是最常见的布局方式头部中间体尾部。 详情 - 页面制作 本文配套视频地址：https://v.qq.com/x/page/o0555... 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中，主...

    张春雷 评论0 收藏0

  • 微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

    摘要：详情页面制作本文配套视频地址开始前请把分支中的目录导入微信开发工具这一章节中，主要介绍详情页的页面制作过程首先看一下我们最终要展示的页面页面结构大体分为三部分，也是最常见的布局方式头部中间体尾部。 详情 - 页面制作 本文配套视频地址：https://v.qq.com/x/page/o0555... 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中，主...

    lyning 评论0 收藏0

  • iKcamp出品微信小程序教学共5章16小节汇总(含视频)

    摘要：微信小程序课程，面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节，适合七天的训练营。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节，适合七天的训练营。 从现在开始，我假装你已经掌握了 html、 css以及 ES6...

    elliott_hu 评论0 收藏0

  • iKcamp出品微信小程序教学共5章16小节汇总(含视频)

    摘要：微信小程序课程，面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节，适合七天的训练营。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节，适合七天的训练营。 从现在开始，我假装你已经掌握了 html、 css以及 ES6...

    paney129 评论0 收藏0

  • iKcamp出品微信小程序教学共5章16小节汇总(含视频)

    摘要：微信小程序课程，面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节，适合七天的训练营。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节，适合七天的训练营。 从现在开始，我假装你已经掌握了 html、 css以及 ES6...

    lmxdawn 评论0 收藏0

发表评论

登陆后可评论

0条评论

roland_reed

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<