Day3 新闻列表页面

<h1> Swiper组件构建轮播图</h1>

<view>
 <swiper vertical="true" indicator-dots="true" autoplay="true" interval="2000">
    <swiper-item>
        <image src="/images/first.png"></image>
    </swiper-item>
    <swiper-item><image src="/images/second.png"></image></swiper-item>
    <swiper-item><image src="/images/third.png"></image></swiper-item>
 </swiper>
</view>

设置css样式时，注意设置在swiper-item上设置宽度（100%）和高度，同样的，在父容器swiper上也需要设置相应的宽（100%）高值。

图片.png

然后构建新闻页面的其它部分，主要用到flex布局：
横向的尽量用rpx，因为横向的宽度时有限的可以实现不同设备的自适应。如果是纵向的尽量用px,因为纵向可以滚动没有长度限制。
这里

图片.png
用到了vertical-align:middle属性，这个属性神奇的把图片和日期对齐到了中间位置，解释参考：
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

<b>页面的声明周期：</b>

<h1>数据绑定:</h1>
小程序的数据绑定通过在js中data中定义数据，然后再wxml中{{}}中绑定数据。
小程序提供了this.setData();属性，可以将属性对象绑定到js文件中的Data属性，然后渲染到wxml中。

• 条件渲染：
  wx-for="{{}}"然后将对象数组中的元素渲染到对应的wxml中。用
  wx:if="{{true}}"可以控制图片的显示。wx-for-index="idx"控制索引。
  注意在渲染的时候要有key值做渲染。

图片.png