从1到2：初学者入门Demo内容列表页-文与字简介内容列表的实现

这里是 从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 字了。宝宝心里苦，辛苦宝宝的可以，打赏、专栏点赞等等，当然你也可以看了就走，如果你忍心的话,,,,