慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-构建新闻列表(下)

构建新闻列表(下)

1.进入目录 pages/posts，修改文件 posts.wxml，添加 class

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <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>
  <view class="post-container">
    <view>
      <image src="/images/avatar/1.png"></image>
      <text>Sep 18 2016</text>
    </view>
    <text>正是虾肥蟹壮时</text>
    <image src="/images/post/crab.png"></image>
    <text>"金秋菊黄蟹正肥 持螯饮酒滋筋髓。"古人意指秋意渐浓之际，也就是食蟹最佳最佳的时节。当然，这一咏一觞的背后，肯定也是文人们流露着这食蟹时的痛快舒心着的情怀。</text>
    <view>
      <image src="../../images/icon/chat.png"></image>
      <text>96</text>
      <image src="../../images/icon/view.png"></image>
      <text>112</text>
    </view>
  </view> 
</view>

2.进入目录 pages/posts，修改文件 posts.wxss

/* pages/posts/posts.wxss */
swiper {
  width:100%;
  height:600rpx;
}

swiper image {
  width:100%;
  height:600rpx;
}

.post-container {
  display:flex;
  flex-direction:column;
  margin-top:20rpx;
  margin-bottom:20rpx;
  background-color:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}

3.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <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>
  <view class="post-container">
    <view class="post-author-date">
      <image src="/images/avatar/1.png"></image>
      <text>Sep 18 2016</text>
    </view>
    <text>正是虾肥蟹壮时</text>
    <image src="/images/post/crab.png"></image>
    <text>"金秋菊黄蟹正肥 持螯饮酒滋筋髓。"古人意指秋意渐浓之际，也就是食蟹最佳最佳的时节。当然，这一咏一觞的背后，肯定也是文人们流露着这食蟹时的痛快舒心着的情怀。</text>
    <view>
      <image src="../../images/icon/chat.png"></image>
      <text>96</text>
      <image src="../../images/icon/view.png"></image>
      <text>112</text>
    </view>
  </view> 
</view>

4.进入目录 pages/posts，修改文件 posts.wxss

/* pages/posts/posts.wxss */
swiper {
  width:100%;
  height:600rpx;
}

swiper image {
  width:100%;
  height:600rpx;
}

.post-container {
  display:flex;
  flex-direction:column;
  margin-top:20rpx;
  margin-bottom:20rpx;
  background-color:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}

.post-author-date {
  margin:10rpx 0 20rpx 10rpx;
}

5.进入目录 pages/posts，修改文件 posts.wxml

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <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>
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">Sep 18 2016</text>
    </view>
    <text>正是虾肥蟹壮时</text>
    <image src="/images/post/crab.png"></image>
    <text>"金秋菊黄蟹正肥 持螯饮酒滋筋髓。"古人意指秋意渐浓之际，也就是食蟹最佳最佳的时节。当然，这一咏一觞的背后，肯定也是文人们流露着这食蟹时的痛快舒心着的情怀。</text>
    <view>
      <image src="../../images/icon/chat.png"></image>
      <text>96</text>
      <image src="../../images/icon/view.png"></image>
      <text>112</text>
    </view>
  </view> 
</view>

6.进入目录 pages/posts，修改文件 posts.wxss

/* pages/posts/posts.wxss */
swiper {
  width:100%;
  height:600rpx;
}

swiper image {
  width:100%;
  height:600rpx;
}

.post-container {
  display:flex;
  flex-direction:column;
  margin-top:20rpx;
  margin-bottom:20rpx;
  background-color:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}

.post-author-date {
  margin:10rpx 0 20rpx 10rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.post-author {
  width:60rpx;
  height:60rpx;
  /*vertical-align:middle;*/
}

.post-date {
  margin-left:20rpx;
  /*vertical-align:middle;*/
  font-size:26rpx;
}

7.进入目录 pages/posts，修改文件 posts.wxml 

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <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>
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">Sep 18 2016</text>
    </view>
    <text class="post-title">正是虾肥蟹壮时</text>
    <image src="/images/post/crab.png"></image>
    <text>"金秋菊黄蟹正肥 持螯饮酒滋筋髓。"古人意指秋意渐浓之际，也就是食蟹最佳最佳的时节。当然，这一咏一觞的背后，肯定也是文人们流露着这食蟹时的痛快舒心着的情怀。</text>
    <view>
      <image src="../../images/icon/chat.png"></image>
      <text>96</text>
      <image src="../../images/icon/view.png"></image>
      <text>112</text>
    </view>
  </view> 
</view>

8.进入目录 pages/posts，修改文件 posts.wxss

/* pages/posts/posts.wxss */
swiper {
  width:100%;
  height:600rpx;
}

swiper image {
  width:100%;
  height:600rpx;
}

.post-container {
  display:flex;
  flex-direction:column;
  margin-top:20rpx;
  margin-bottom:20rpx;
  background-color:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}

.post-author-date {
  margin:10rpx 0 20rpx 10rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.post-author {
  width:60rpx;
  height:60rpx;
  /*vertical-align:middle;*/
}

.post-date {
  margin-left:20rpx;
  /*vertical-align:middle;*/
  font-size:26rpx;
}

.post-title {
  font-size:34rpx;
  font-weight:600;
  margin-bottom:10px;
  margin-left:10px;
  color:#333;
}

9.进入目录 pages/posts，修改文件 posts.wxml  

<view>
  <swiper indicator-dots="true" autoplay="true" interval="5000">
    <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>
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">Sep 18 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">96</text>
      <image class="post-like-image" src="../../images/icon/view.png"></image>
      <text class="post-like-font">112</text>
    </view>
  </view> 
</view>

10.进入目录 pages/posts，修改文件 posts.wxss

/* pages/posts/posts.wxss */
swiper {
  width:100%;
  height:600rpx;
}

swiper image {
  width:100%;
  height:600rpx;
}

.post-container {
  display:flex;
  flex-direction:column;
  margin-top:20rpx;
  margin-bottom:20rpx;
  background-color:#fff;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  padding-bottom:10rpx;
}

.post-author-date {
  margin:10rpx 0 20rpx 10rpx;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.post-author {
  width:60rpx;
  height:60rpx;
  /*vertical-align:middle;*/
}

.post-date {
  margin-left:20rpx;
  /*vertical-align:middle;*/
  font-size:26rpx;
}

.post-title {
  font-size:34rpx;
  font-weight:600;
  margin-bottom:10px;
  margin-left:10px;
  color:#333;
}

.post-image {
  width:100%;
  height:340rpx;
  margin-bottom:15px;
}

.post-content {
  font-size:28rpx;
  color:#666;
  letter-spacing:2rpx;
  margin-left:20rpx;
  margin-bottom:20rpx;
}

11.保存测试