下面我們來繼續研究代碼部分： 
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僅可放置(zhi)在swiper組件(jian)中，寬高自動設置(zhi)為(wei)100%。

js部分：

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

js文(wen)件中定義(yi)了一個數組，里面存放圖片的(de)路(lu)徑

wxss代碼：

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

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

1、效果圖預覽

在拿(na)到效果(guo)圖后不要(yao)先急著去(qu)(qu)寫(xie)代(dai)碼，而是(shi)(shi)要(yao)去(qu)(qu)分析(xi)一(yi)下頁面的整體結構，用什(shen)么方式定位和布局。小(xiao)程序里建議使(shi)用flex布局，因(yin)為小(xiao)程序對flex的支持是(shi)(shi)很(hen)好的。

 上(shang)一篇(pian)博客中完(wan)成了(le)輪播圖部分(fen)，接下(xia)來(lai)繼續(xu)完(wan)成下(xia)面的新聞列表部分(fen)

新聞列表部分整體(ti)使用(yong)flex縱向布(bu)局(ju)比較合適，  先把(ba)頁面內的(de)元素(su)標簽(qian)和類名(ming)寫好。

    <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: