微信小程序教學第四章第一節（含視頻）：小程序中級實戰教程：詳情-頁面製做

時間 2019-11-09

標籤微信程序教學第四一節視頻中級實戰教程詳情頁面製做简体版

原文原文鏈接

詳情 - 頁面製做

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

開始前請把 ch4-1 分支中的 code/ 目錄導入微信開發工具
這一章節中，主要介紹詳情頁的頁面製做過程html

首先看一下咱們最終要展現的頁面前端

頁面結構大致分爲三部分，也是最多見的佈局方式：頭部、中間體、尾部。最頂部的是頁面 title，也就是標題，若是是通常的頁面，咱們只須要在 detail.json 中增長以下配置便可：
 ~~"navigationBarTitleText": "Quora精選：爲何聰明人總能保持冷靜"~~json

但咱們製做的詳情頁面信息是隨着文章內容一直變化的，因此須要在代碼中單獨處理，就不須要在 detail.json 中添加
這裏，咱們先製做出：頭部和尾部。中間的內容部分，會由 parse.js 解析文章數據生成。
 小程序

開始以前，咱們先修改 app.wxss 文件，引入須要用到的公用樣式表和第三方樣式微信小程序

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

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

微信

Step 1. 頁面準備

因爲文章須要上下滾動，咱們採用 scroll-view 組件來包括整個頁面內容

<!-- detail.html -->
<scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap">
</scroll-view>

scroll-view 組件，至關於咱們在常規的 div 標籤上增長了滾動功能並進行封裝
 微信開發

而後調整下頁面的高度和背景色

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

  .root-wrap {
    height: 100%
  }

app

Step 2. 頁面頭部製做

頭部包含三塊內容：大標題、左浮動顯示做者、右浮雲顯示日期，製做以下：

<!-- detail.html -->
  <scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap">
    <view class="wrapper">
      <view class="info">
        <view class="info-title">Quora精選：爲何聰明人總能保持冷靜</view>
        <view class="info-desc cf">
          <text class="info-desc-author fl">哈利波特</text>
          <text class="info-desc-date fr">2017/06/27</text>
        </view>
        <view class="info-line under-line"></view>
      </view>
    </view>
  </scroll-view>

xss

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

/* 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
  }

Step 3. 頁面尾部製做

頁尾相似於於菜單導航功能，用戶能夠進入 下一篇 或 返回 列表，而且當頁面滾動時候，固定在底部不動

修改頁面 detail.html

<!-- 增長如下內容，footbar節點與info節點平級 -->
  <view class="footbar">
    <form>
      <button class="footbar-back clearBtnDefault">
        <view class="icon footbar-back-icon"></view>
      </button>
      <button class="footbar-btn clearBtnDefault">下一篇</button>
      <button class="footbar-share clearBtnDefault">
        <view class="icon footbar-share-icon"></view>
      </button>
    </form>
  </view>

修改樣式表

/* detail.css 增長如下樣式內容 */
  .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
  }

頁面尾部製做完成，下一步咱們將處理中間的文章內容部分。

Step 4. 爲中間的 content 內容預留位置

完整的頁面代碼以下

<scroll-view scroll-y="true" enable-back-to-top="true" class="root-wrap">
      <view class="wrapper">
          <view class="info">
            <view class="info-title">Quora精選：爲何聰明人總能保持冷靜</view>
            <view class="info-desc cf">
              <text class="info-desc-author fl">哈利波特</text>
              <text class="info-desc-date fr">2017/06/27</text>
            </view>
            <view class="info-line under-line"></view>
          </view>
          <!-- 增長正文視圖位置  -->
          <view class="content">
              文章正文
          </view>
          <view class="footbar">
              <form>
                  <button class="footbar-back clearBtnDefault">
                      <view class="icon footbar-back-icon"></view>
                  </button>
                  <button class="footbar-btn clearBtnDefault">下一篇</button>
                  <button class="footbar-share clearBtnDefault">
                      <view class="icon footbar-share-icon"></view>
                  </button>
              </form>
          </view>
      </view>
  </scroll-view>