文章列表 每篇文章包含文章標題、文章頭圖、文章概要、評論數和閱讀數，基本上使用view, image, text 這三個元件就可以完成

先將準備好的圖片放在根目錄images檔案相應的路徑下，沒有建立，不過多解釋

我們在前序博文微信輪播圖實現專案下繼續操作操作

在post.wxml swiper元件後追加如下程式碼

<view class="post-container">
  <view class="post-author-date">
    <image src="../../images/avatar/avator-3.jpg">
 
</image>
    <text> Dev 21 2018</text>
  </view>
  <text class="post-title">最近比較忙....</text>
  <image class="post-image" src="/../images/post/post-7.jpg"></image>
  <text class="post-content">佛說，一念三千。一念起，萬水千山;一念滅，滄海桑田。一念執著，生死疲勞;一念放下，萬般自在....
  </text>
 

  <view class="post-like">
    <image src="../../images/icon/wx_app_collect.png"></image>
    <text>108</text>
    <image src="../../images/icon/wx_app_view.png"></image>
    <text>92</text>
    <image src="../../images/icon/wx_app_message.png"></image>
 

    <text>7</text>
  </view>
</view>

在post.wxss下追加並且編寫元件樣式

swiper{         /*設定swiper元件的寬度和高度*/
  width:100%;
  height:600rpx;
}
swiper image{   /*設定image元件的樣式*/
  width:100%;
  height:600rpx;
}
.post-container{
  flex-direction:column;
  display:flex;
  margin:20rpx 0 40rpx;
  background-color:#fff;
  border-bottom:1px solid#ededed;
  border-top:1px solid#ededed;
  padding-bottom:5px;
}
.post-author-date{
  margin:10rpx 0 20rpx 10px;
  display:flex;
  flex-direction:row;
  align-items:center;
}
.post-author-date image{
  width:60rpx;
  height:60rpx;
}
.post-author-date text{
  margin-left:20rpx;
}
.post-title{
  font-size:16px;
  font-weight:600;
  color:#333;
  margin-bottom:10px;
  margin-left:10px;
}
.post-image{
  width:100%;
  height:340rpx;
  margin-bottom:15rpx;
}
.post-content{
  color:#666;
  font-size:26rpx;
  margin-bottom:20rpx;
  letter-spacing:2rpx;
  line-height:40rpx;
}
.post-like{
  display:flex;
  flex-direction:row;
  font-size:13px;
  line-height:16px;
  margin-left:10px;
  align-items:center;
}
.post-like image{
  height:16px;
  width:16px;
  margin-right:8px;
}
.post-like text{
  margin-right:20px;
}

儲存並執行，效果如下

時間和數量也就是108 92 7 Nev 21 2018 更改這些字型的大小和顏色

在app.wxss全域性樣式表中新增預設字型樣式

text{
  font-size:24rpx;
  font-family:Microsoft YaHei;
  color:#666;
}

儲存並執行，效果如下：