(六)微信小程序：image组件的4种缩放模式与9种裁剪模式, 和静态多文章列表

4种缩放模式
scaleToFill 不保持纵横比例缩放图片，使图片的高度完全拉伸至填满image元素
         此模式是缩放的默认模式，缺省时，小程序以此模式来缩放图片
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
        也就是说，可以完整地将图片显示出来
aspectFill 保持横纵比缩放图片，只保证图片的短边能完全显示出来
         也就是说，图片通常只在水平或垂直方向是完整的，另一方向将会发生截取
widthFix 宽度不变，高度自动变化，保持原图宽高比不变

我们在post.wxmlimage组件下添加缩放模式，代码如下

 <image class="post-image" src="/../images/post/post-7.jpg" mode="widthFix" ></image>

模式可自行决定，保存并运行效果如下：

9种剪裁模式
top 不缩放图片，只显示图片的顶部区域
bottom 不缩放图片，只显示图片的底部区域
center 不缩放图片，只显示图片的中间区域
left 不缩放图片，只显示图片的左边区域
right 不缩放图片，只显示图片的右边区域
top left 不缩放图片，只显示图片的左上角区域
top right 不缩放图片，只显示图片的右上角区域
bottom left 不缩放图片，只显示图片的左下角区域
bottom right 不缩放图片，只显示图片的右下角区域
若图片的原始尺寸<容器的尺寸，裁剪模式也不会使图片发生缩放，所以结果就是不会裁剪图片

我们同样在post.wxmlimage组件下添加裁剪模式，代码如下

<image class="post-image" src="/../images/post/post-7.jpg" mode="top" ></image>

---

静态文章列表

在post.wxml中重复复制文章代码，若CSS代码编写足够健壮，可迅速新增文章，且样式不会错乱

<view>  <!--作为整个网页的容器-->
  <swiper indicator-dots="ture" autoplay="true" interval="5000" circular="true" vertical="{{false}}"> 
    <swiper-item>
      <image src="../../images/post/post-1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/post/post-2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="../../images/post/post-3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

<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" mode="aspectFit" ></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>

<view class="post-container">
  <view class="post-author-date">
    <image src="../../images/avatar/avator-1.jpg" ></image>
    <text> Dev 21 2018</text>
  </view>
  <text class="post-title">不知道写点啥....</text>
  <image class="post-image" src="/../images/post/post-10.jpg" mode="aspectFit" ></image>
  <text class="post-content">当阵阵风声，把我喝醉的灵魂唤回，凝聚成如今孤独的身躯时，再也无能为力去追寻旧日步伐的我，又该怎样寻味那时斑斓。当片片落叶点缀着眼前模糊的视野，我更不知道这是寒冷滋味，还是柔暖的饱和，亦或是麻木的无动于忠....
  </text>
  <view class="post-like">
    <image src="../../images/icon/wx_app_collect.png"></image>
    <text>1008</text>
    <image src="../../images/icon/wx_app_view.png"></image>
    <text>920</text>
    <image src="../../images/icon/wx_app_message.png"></image>
    <text>72</text>
  </view>
</view>

<view class="post-container">
  <view class="post-author-date">
    <image src="../../images/avatar/avator-4.jpg" ></image>
    <text> Dev 21 2018</text>
  </view>
  <text class="post-title">网上下载了点东东....</text>
  <image class="post-image" src="/../images/post/post-11.jpg" mode="aspectFit" ></image>
  <text class="post-content">千年梦，弹指间，往事如水淡如烟。曲以终，人亦散，旧梦初醒已千年....
  </text>
  <view class="post-like">
    <image src="../../images/icon/wx_app_collect.png"></image>
    <text>18</text>
    <image src="../../images/icon/wx_app_view.png"></image>
    <text>111</text>
    <image src="../../images/icon/wx_app_message.png"></image>
    <text>17</text>
  </view>
</view>