### swiper組件開發輪播圖
`post.wxml`
~~~html
<swiper indicator-dots="true" autoplay="true" interval="2000">
<swiper-item>
<image src='/images/wx.png'></image>
</swiper-item>
<swiper-item>
<image src='/images/vr.png'></image>
</swiper-item>
<swiper-item>
<image src='/images/iqiyi.png'></image>
</swiper-item>
</swiper>
~~~
`post.wxss`
~~~css
swiper{
width: 100%;
height: 500rpx;
}
swiper image{
width: 100%;
height: 500rpx;
}
~~~
### 開發新聞列表
`post.wxss`
~~~html
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="/images/avatar/1.png"></image>
<text class="post-date">Nov 25 2016</text>
</view>
<text class='post-title'>正是蝦肥蟹壯時</text>
<image class="post-image" src="/images/post/crab.png"></image>
<text class="post-content">菊黃蟹正肥，品嘗秋之味。徐志摩把,“看初花的荻蘆”和“到樓外樓吃蟹”,并列為秋天來杭州不能錯過的風雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿</text>
<view class='post-like'>
<image class='post-like-image' src="../../images/icon/chat.png"></image>
<text class='post-like-font'>92</text>
<image class='post-like-image' src="../../images/icon/view.png"></image>
<text class='post-like-font'>65</text>
</view>
</view>
~~~
~~~css
.post-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
.post-date{
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size: 26rpx;
}
.post-title{
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-left: 10px;
}
.post-image{
margin-left: 16px;
width: 100%;
height: 340rpx;
margin: 0 auto;
margin-bottom: 15px;
}
.post-content{
color: #666;
font-size: 28rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}
.post-like{
font-size: 13px;
flex-direction: row;
line-height: 16px;
margin-left: 10px;
}
.post-like-image{
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align: middle;
}
.post-like-font{
vertical-align: middle;
margin-right: 20px;
}
~~~
### 配置單獨的window選項
`post.json`
~~~json
{
"navigationBarBackgroundColor": "#405f80",
"navigationBarTitleText":"豆瓣電影"
}
~~~
