第一步 修改app.json

{
  "pages":[
    "pages/posts/post",
    "pages/index/index",
    "pages/video/video"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#405f80",
    "navigationBarTitleText": "七区时报",
    "navigationBarTextStyle":"white"
  },

  "tabBar":{
    "borderStyle":"white",
    "postion":"bottom",
    "list" :[{
        "pagePath": "pages/posts/post",
        "text": "阅读",
        "iconPath": "images/tab/yuedu.png",
        "selectedIconPath": "images/tab/yuedu_hl.png"
      },
      {
    "pagePath": "pages/index/index",
    "text": "短视频",
    "iconPath": "images/tab/dianying.png",
    "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
 }
}

修改post.wxml

<view>
<swiper indicator-dots='{{indicatorDots}}' 
autoplay='{{autoplay}}' interval='{{interval}}'
 duration='{{duration}}'>
    
      <swiper-item>
      <image src='/images/yp.png'></image>
      </swiper-item>
      <swiper-item>
      <image src='/images/vr.png'></image>
      </swiper-item>
      <swiper-item>
      <image src='/images/bwc.png'></image>
      </swiper-item>
    
    </swiper>

</view>

改进版 修改post.wxml

<view>
<swiper indicator-dots='{{indicatorDots}}'
 autoplay='{{autoplay}}'
 interval='{{interval}}'
 duration='{{duration}}'>
    
      <block wx:for="{{imgUrls}}">

        <swiper-item>
          <image class='' src='{{item}}'></image>
        </swiper-item>

      </block>
    
    </swiper>

</view>

修改post.js

data: {
    indicatorDots: true,

    autoplay:true,
    interval: 2000,
    duration:1000,
    imgUrls:[
      "/images/yp.png",
      "/images/vr.png",
      "/images/bwc.png"
    ]

  },

增加post.wxml中的下半部分

  <!-- 每个列表分为5部分 -->
<view  class='post-container'>
    <view class='post-author-data'>
        <image class='post-author'
        src='/images/avatar/1.png'>
        </image>
        <text>Nov 25 2016</text>
    </view>

    <text>正是虾肥蟹壮时</text>
    
    <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>

post.wxss

.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-top: 10rpx;
  margin-bottom: 20rpx;
  margin-left: 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-top: 10px;
    margin-left: 10px; 
}
.post-image{
  margin-left: 16px;
  width: 100%;
  height: 340rpx;
  margin: auto 0;
  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;
}