下面我們來繼續研究代碼部分： 
wxml部分：

<view>
  <swiper indicator-dots="true" autoplay="true" interval="2000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}"></image>
    </swiper-item>
    </block>
  </swiper>
</view>

注意：swiper-item僅可放置在swiper組件中，寬高自動設置為100%。

js部分：

  data:{
    imgUrls: [
      '/images/wx.png',
      '/images/vr.png',
      '/images/iqiyi.png'
    ]
  },

js文件中定義了一個數組，里面存放圖片的路徑

wxss代碼：

swiper,swiper image {
  width: 100%;
  height: 500rpx;
}

注意：輪播圖組件的寬高樣式需要設置在swiper標簽上，官方文檔中沒有說明，只能一個一個試，最后的結論是必須定義在swiper標簽。

1、效果圖預覽

在拿到效果圖后不要先急著去寫代碼，而是要去分析一下頁面的整體結構，用什么方式定位和布局。小程序里建議使用flex布局，因為小程序對flex的支持是很好的。

上一篇博客中完成了輪播圖部分，接下來繼續完成下面的新聞列表部分

新聞列表部分整體使用flex縱向布局比較合適，  先把頁面內的元素標簽和類名寫好。

    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="{{item.view_img}}"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="{{item.collect_img}}"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>

.post-container{
  display: flex;
  flex-direction: