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

文與字簡介內(nèi)容列表

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

（1）分析原型圖，拆分內(nèi)容結(jié)構(gòu)，構(gòu)造骨架（wxml）

拆分結(jié)構(gòu)，可將單個文與字簡介內(nèi)容分為三個部分：

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

結(jié)構(gòu)分析之后得到骨架如下（主要是基礎(chǔ)的view、image、text的嵌套布局）：

<view class="container">
  <!-- 省略了 swiper 內(nèi)容 -->
  <view class="post-item-container">
    <!-- 各個文與字簡介內(nèi)容，基本結(jié)構(gòu)一致，僅僅是灌入數(shù)據(jù)的不同，重點分析基本結(jié)構(gòu) -->

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

      <!-- 主體部分：標題、展示圖片、內(nèi)容概述 -->
      <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">這是內(nèi)容概述</text>
      </view>

      <!-- 尾部：收藏圖標、收藏數(shù)、分享圖標、分享數(shù) -->
      <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的整體布局 結(jié)束-->

  </view>
</view>

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

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

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

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

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

/* 還記得 page 嗎？ 為了得到一種斑馬線的效果。我們設(shè)置整體的背景色是是 灰色的*/
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 布局 結(jié)束*/

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

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

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

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

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

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

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

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

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

寫在文與字簡介內(nèi)容列表之后

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

PS：為了方便大家的模板抽取，筆者已經(jīng)在代碼中給了小提示了，細心的你，肯定可以發(fā)現(xiàn)的吧！

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

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