這里是 從1到2：初學者入門Demo內容列表頁 的局部內容，因為之前內容過于多，為了方便大家的繼續閱讀學習，特此抽取。如果你第一次看到這部分內容，并對內容感興趣的話，請點擊查看完整原文。

文與字簡介內容列表

注意：所用到的圖片素材，在 百度公共盤中。失效的話，也可使用 百度私密盤； 密碼：gcv1

（1）分析原型圖，拆分內容結構，構造骨架（wxml）

拆分結構，可將單個文與字簡介內容分為三個部分：

• a、包含頭像和發布日期的頭部
• b、由文章標題、展示圖、內容概述組成的主體部分
• c、尾部是分享數數和收藏數

結構分析之后得到骨架如下（主要是基礎的view、image、text的嵌套布局）：

<view class="container">
  <!-- 省略了 swiper 內容 -->
  <view class="post-item-container">
    <!-- 各個文與字簡介內容，基本結構一致，僅僅是灌入數據的不同，重點分析基本結構 -->

    <!-- post-item的整體布局 開始（從這里開始的呢！） -->
    <view class="post-item">
      <!-- 頭部：作者頭像、發布日期 -->
      <view class="post-avatar-date">
        <image class="post-avatar" src="/imgs/avatar/1.png"></image>
        <text class="post-date">Seq 12 2017</text>
      </view>

      <!-- 主體部分：標題、展示圖片、內容概述 -->
      <view class="post-article" bindtap="onPostTap" data-post-id="3">
        <text class="post-title">這是標題</text>
        <image class="post-coverImg" src="/imgs/post/crab.png" mode="aspectFill" />
        <text class="post-content">這是內容概述</text>
      </view>

      <!-- 尾部：收藏圖標、收藏數、分享圖標、分享數 -->
      <view class="post-collection-share">
        <image src="/imgs/icon/comment.png" />
        <text>985</text>
        <image src="/imgs/icon/view.png" />
        <text>211</text>
      </view>
    </view>
    <!-- post-item的整體布局 結束-->

  </view>
</view>

該步驟完成后，得到下圖：

（2）頁面骨架穿上衣服 welcome.wxss ，定義樣式、布局

結構的合理拆分，可以大大提升頁面搭建的速度，根據上述的分析，可以很簡單的使用 flex 將各個部分進行布局，布局分析步驟依然是：先整體，再局部：（flex布局的內容，請參看CSS進階系列一flex布局）

• 整體來看，頭部、主體部分、尾部是列布局（flex-direction: column;）
• 局部來看，頭像、發布日期所在的頭部使用的 行布局（flex-direction: row;）；主體部分使用的 列布局（flex-direction: row;）；尾部的話，依然是行布局（flex-direction: row;）

注意：對于圖標、圖片寬高的設置，除了UI設計師提供之外，不二法門就是自己嘗試，慢慢調。

/* 還記得 page 嗎？ 為了得到一種斑馬線的效果。我們設置整體的背景色是是 灰色的*/
page {
  background-color: #eee;
}

.post-swiper {
  height: 400rpx;
  width: 100%;
}

/*抽取 .post-swiper image 樣式屬性*/
.post-swiper image {
  height: 400rpx;
  width: 100%;
}

/*  post-item 布局 開始 （從這里開始抽取哦）*/
.post-item {
  background-color: #fff;
  margin-top: 30rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}

.post-avatar-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10rpx;
}

.post-avatar {
  height: 80rpx;
  width: 80rpx;
  margin-right: 20rpx;
}

.post-date {
  font-size: 26rpx;
  color: #666;
}

.post-title {
  font-weight: 700;
  font-size: 38rpx;
}

.post-coverImg {
  width: 750rpx;
  height: 210px;
  margin-left: -20rpx;
  margin-top: 20rpx;
}

.post-content {
  font-size: 28rpx;
  color: #333;
}

.post-collection-share {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20rpx;
  margin-left: 500rpx;
}

.post-collection-share image {
  height: 24rpx;
  width: 24rpx;
  margin-left: 20rpx;
  margin-right: 10rpx;
}

.post-collection-share text {
  font-size: 26rpx;
  color: #999;
}
/*  post-item 布局 結束*/

該步驟完成后，得到下圖（簡直完美的不要不要的，有木有！）：

（3）搞一個小動作 welcome.js

這里需要的就是從文與字簡介內容到文與字詳情頁面的小動作，很熟悉有木有，還是那個輪播圖片點擊時間 onPostTap，再在綁定事件的 組件上設置一個 data-post-id="{{postId}}" 就可以了。

實際上我已經偷偷的完成了，就在主體部分的最外層容器上，不信你看：<view class="post-article" bindtap="onPostTap" data-post-id="3">

（4）問題來了？ 說好的是 6個文與字簡介內容呢，現在只有一個呀！

開始分析時，我們曾說過，文與字簡介內容具有相同的基本結構，只是灌入的數據不同。那么想要 6個文與字簡介內容，豈不是易如反掌，直接復制粘貼，然后替換不同的數據不就可以了嗎？

先不說。小程序僅僅有1024kb！ 如果是 600 個、6000個文與字簡介內容呢？

再者說，大量重復，代碼不夠簡潔，這是不能忍的。

小程序視圖層（Wxml）上，當遇到大量重復的代碼時，我們要做的只有兩件事情：（1）將重復代碼抽取成一個模板單元；（2）使用列表渲染，根據傳入的數據，渲染一定數量的模板單元即可。【類似邏輯層（js）方法的抽取，是不是一樣的道理：當一段功能性代碼總是被復制粘貼，我們要做的就是：取功能性代碼，將變化的內容作為參數傳入到方法內容。在需要使用時，傳入具體的數據即可。】

寫在文與字簡介內容列表之后

從0到1 中，我們已經完成了一個 自定義按鈕的抽取，道理一樣，步驟一樣，唯一不同的是：這里只是代碼比較多而已。大家自己動手做一下吧！

PS：為了方便大家的模板抽取，筆者已經在代碼中給了小提示了，細心的你，肯定可以發現的吧！

辛苦樓主的方式有很多，可以打賞，去專欄點贊，或者是一笑而過…..，或者是說兩句…. 不建議大家收藏，看完就趕緊動手吧！！！

說好的不啰嗦，還是寫了 快 10000 字了。寶寶心里苦，辛苦寶寶的可以，打賞、專欄點贊等等，當然你也可以看了就走，如果你忍心的話,,,,