4.6　完成静态文章列表

先把上节更改的post-image的mode属性恢复成我们需要的mode=aspectFill。

现在，文章列表还只有1篇文章。1篇文章如何叫做文章列表？

为了多几篇文章，我们将代码清单4-6的代码再复制几份，依次加入到post.wxml文件中。这里再复制两份，形成一个有3篇文章的文章列表。

如果CSS代码编写足够健壮，无须更改CSS代码，重复复制post.wxml中的文章代码即可迅速新增文章，且样式不会错乱。保存后，模拟器将呈现出3篇一模一样的文章来。效果如图4-16所示。

图4-16　复制文章

开发者可任意复制若干数量的文章，让页面看起来更像是一个文章列表。为了避免重复的数据，我们修改其中的两个文章数据，更改后的post.wxml文件如下。

保存后可以看到，3篇不同的文章已出现在了页面中。开发者可自行调整代码中的文字、图片，无须和示例代码保持一致。