摘要：詳情頁面制作本文配套視頻地址開始前請把分支中的目錄導(dǎo)入微信開發(fā)工具這一章節(jié)中，主要介紹詳情頁的頁面制作過程首先看一下我們最終要展示的頁面頁面結(jié)構(gòu)大體分為三部分，也是最常見的布局方式頭部中間體尾部。

本文配套視頻地址：
https://v.qq.com/x/page/o0555...

開始前請把 ch4-1 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具  
這一章節(jié)中，主要介紹詳情頁的頁面制作過程

首先看一下我們最終要展示的頁面

頁面結(jié)構(gòu)大體分為三部分，也是最常見的布局方式：頭部、中間體、尾部。最頂部的是頁面 title，也就是標(biāo)題，如果是一般的頁面，我們只需要在 detail.json 中增加如下配置即可：


"navigationBarTitleText": "Quora精選：為什么聰明人總能保持冷靜"

但我們制作的詳情頁面信息是隨著文章內(nèi)容一直變化的，所以需要在代碼中多帶帶處理，就不需要在 detail.json 中添加
這里，我們先制作出：頭部和尾部。中間的內(nèi)容部分，會由 parse.js 解析文章數(shù)據(jù)生成。

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

@import "./styles/base.wxss";
@import "./lib/wxParse/wxParse.wxss";

.green{
    color: #26b961;
}
page{
    height: 100%;
    background-color: #f8f8f8;
}

由于文章需要上下滾動，我們采用 scroll-view 組件來包括整個(gè)頁面內(nèi)容

scroll-view 組件，相當(dāng)于我們在常規(guī)的 div 標(biāo)簽上增加了滾動功能并進(jìn)行封裝

然后調(diào)整下頁面的高度和背景色

  /* detail.css */
  page {
    background: #fbfbfb;
    height: 100%
  }

  .root-wrap {
    height: 100%
  }

頭部包含三塊內(nèi)容：大標(biāo)題、左浮動顯示作者、右浮云顯示日期，制作如下：

  
  
    
      
        Quora精選：為什么聰明人總能保持冷靜
        
          哈利波特
          2017/06/27
        
        
      
    
   

對應(yīng)樣式文件，注意： fl(float:left)、 fr(float:right)、 cf(clear:float) 三個(gè)樣式都是在 base.wxss 中設(shè)置的全局樣式

  /* detail.css */
  page {
    background: #fbfbfb;
    height: 100%
  }

  .root-wrap {
    height: 100%
  }

  .wrapper {
    padding-bottom: 96rpx
  }

  .wrapper .top-img {
    width: 100%;
    height: 470rpx;
    vertical-align: top
  }

  .wrapper .info {
    padding: 0 36rpx
  }

  .wrapper .info-title {
    padding: 40rpx 0;
    line-height: 60rpx;
    font-size: 44rpx;
    font-weight: 500;
    color: #333
  }

  .wrapper .info-desc {
    font-size: 28rpx;
    line-height: 30rpx;
    color: #c1c1c1
  }

  .wrapper .info-desc-author {
    max-width: 65%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .wrapper .info-line {
    margin-top: 24rpx
  }

頁尾類似于于菜單導(dǎo)航功能，用戶可以進(jìn)入 下一篇 或 返回 列表，并且當(dāng)頁面滾動時(shí)候，固定在底部不動

修改頁面 detail.html

  
  
    

      
        
      
      下一篇
      
        
      
    
  

修改樣式表

  /* detail.css 增加以下樣式內(nèi)容 */
  .wrapper .footbar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    background: #fff;
    font-size: 32rpx;
    color: #333
  }

  .wrapper .footbar-back,.wrapper .footbar-share {
    position: absolute;
    width: 96rpx;
    height: 96rpx;
    bottom: 0;
    z-index: 2
  }

  .wrapper .footbar .icon {
    position: absolute;
    width: 42rpx;
    height: 38rpx;
    top: 30rpx
  }

  .wrapper .footbar-back {
    left: 0
  }

  .wrapper .footbar-back-icon {
    left: 30rpx;
    background: url(https://n1image.hjfile.cn/mh/2017/06/06/1305a8ac4dc9347b59cc8c2c667122e5.png) 0 0 no-repeat;
    background-size: contain
  }

  .wrapper .footbar-list {
    left: 0
  }

  .wrapper .footbar-list-icon {
    left: 30rpx;
    background: url(https://n1image.hjfile.cn/mh/2017/06/09/1e630ac45547e6ab5260928e1d57a3c6.png) 0 0 no-repeat;
    background-size: contain
  }

  .wrapper .footbar-btn {
    text-align: center;
    margin: 0 96rpx;
    height: 96rpx;
    line-height: 96rpx
  }

  .wrapper .footbar-share {
    right: 0
  }

  .wrapper .footbar-share-icon {
    right: 30rpx;
    background: url(https://n1image.hjfile.cn/mh/2017/06/09/ebc3852fb865bd19182c09ca599d8ac1.png) 0 0 no-repeat;
    background-size: contain
  }

  .wrapper .clearBtnDefault {
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0
  }

  .wrapper .clearBtnDefault:after {
    content: "";
    border: none;
    border-radius: 0;
    width: 0;
    height: 0
  }

頁面尾部制作完成，下一步我們將處理中間的文章內(nèi)容部分。

完整的頁面代碼如下

  
      
          
            Quora精選：為什么聰明人總能保持冷靜
            
              哈利波特
              2017/06/27
            
            
          
          
          
              文章正文
          
          
              

                  
                      
                  
                  下一篇
                  
                      
                  
              
          
      
  

iKcamp官網(wǎng)：http://www.ikcamp.com
訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。
包含：文章、視頻、源代碼

iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開售。

報(bào)名地址：http://www.huodongxing.com/ev...
與“天天練口語”小程序總榜排名第四、教育類排名第一的研發(fā)團(tuán)隊(duì)，面對面溝通交流。