4.4　构建文章列表的骨架和样式

完成了swiper轮播图后，我们继续来构建设计图中的下半部分——文章列表。设计图见本书彩页部分。

正如前文所讲，构建文章列表依然只需要我们熟悉3个组件：view、text和image。将代码清单4-6的代码添加在swiper组件代码后面。

保存后，效果如图4-6所示。

由于还没有加入CSS代码，所以整个页面的布局乱七八糟，但文章列表所有的元素都已经呈现在了页面中。将代码清单4-7的代码加入到post.wxss文件中。

保存预览一下，效果将如图4-7所示。

图4-6　缺少样式时post页面的效果

图4-7　加入样式后的文章列表

还有些小小的问题：“Jan 28 2017”和“108、92”这几个文本的字体大小与颜色都不太好看。我们可以将一些默认的字体样式放在app.wxss全局样式表里。

保存后，日期和数量都呈现出app.wxss里设置的样式。