<h1> Swiper組件構(gòu)建輪播圖</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>
設(shè)置css樣式時，注意設(shè)置在swiper-item上設(shè)置寬度（100%）和高度椿疗，同樣的萍虽，在父容器swiper上也需要設(shè)置相應(yīng)的寬（100%）高值轴脐。
圖片.png
然后構(gòu)建新聞頁面的其它部分债热，主要用到flex布局：
橫向的盡量用rpx砾嫉，因為橫向的寬度時有限的可以實現(xiàn)不同設(shè)備的自適應(yīng)。如果是縱向的盡量用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>數(shù)據(jù)綁定:</h1>
小程序的數(shù)據(jù)綁定通過在js中data中定義數(shù)據(jù)舌剂，然后再wxml中{{}}中綁定數(shù)據(jù)济锄。
小程序提供了this.setData();屬性，可以將屬性對象綁定到j(luò)s文件中的Data屬性霍转，然后渲染到wxml中荐绝。
- 條件渲染：
wx-for="{{}}"然后將對象數(shù)組中的元素渲染到對應(yīng)的wxml中。用
wx:if="{{true}}"可以控制圖片的顯示避消。wx-for-index="idx"控制索引低滩。
注意在渲染的時候要有key值做渲染。
圖片.png
