1、案例描述

使用image组件，来展示所有image的mode（显示模式）。

示例图片.jpeg
示例图片.jpeg

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">图片展示</view>
  <view class="image_mode">列表的四种缩放模式</view>
  <block wx:for="{{image_mode_size_change}}" wx:key="*this">
    <view>{{index}}:{{item}}</view>
    <view class="image_setUp">
      <image mode="{{index}}" src="{{source1}}"></image>
    </view>
    ============
  </block>

  <view class="image_mode">列表的九种裁剪模式</view>
  <text>原图：</text>
  <view class="image_setUp">
    <image src="{{source2}}"></image>
  </view>
  <block wx:for="{{image_mode_size_cutting}}" wx:key="*this">
    <view>{{item.mode}}:{{item.interpret}}</view>
    <view class="image_setUp">
      <image mode="{{item.mode}}" src="{{source2}}"></image>
    </view>
    ============
  </block>
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.image_mode{
    text-align: center;
    size: 15px;
    color: black;
    font-weight: bold;
    margin: 5px 0px;
}
.image_setUp{
    text-align: center;
    margin: 5px 0px;
}
image{
    height: 200px;
    width: 200px;
    background-color: rgb(17, 10, 10);
}

• js

// pages/kj/demo111-template/index.js

var image_mode_size_change={
  scaleToFill:'不保持纵横比缩放图片，使图片的高度完全拉伸到填满image元素',
  aspectFit:'保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示出来',
  aspectFill:'保持纵横比缩放图片，只保证图片的短边能完全显示出来。即图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取',
  widthFix:'宽度不变，高度自动变化，保持原图宽高比不变'
};
var source1 = "https://img.haomeiwen.com/i14216764/979eb2d7930bad9b.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";
var image_mode_size_cutting=[
{
    mode : 'top',
    interpret : '不缩放，只显示图片顶部'
},
{
  mode : 'bottom',
  interpret : '不缩放，只显示图片底部'
},
{
  mode : 'center',
  interpret : '不缩放，只显示图片中间'
},
{
  mode : 'left',
  interpret : '不缩放，只显示图片左边'
},
{
  mode : 'right',
  interpret : '不缩放，只显示图片右边'
},
{
  mode : 'top left',
  interpret : '不缩放，只显示图片左上'
},
{
  mode : 'top right',
  interpret : '不缩放，只显示图片右上'
},
{
  mode : 'bottom left',
  interpret : '不缩放，只显示图片左下'
},
{
  mode : 'bottom right',
  interpret : '不缩放，只显示图片右下'
}
];
var source2 = "https://img.haomeiwen.com/i14216764/f3704641090458b4.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";
Page({
  data: {
    source1 : source1,
    source2 : source2,
    image_mode_size_change : image_mode_size_change,
    image_mode_size_cutting : image_mode_size_cutting
  }
 
  
})

2.2、结果展示

结果1.png
结果2.png

3、知识汇总

知识要点.png image组件.png image组件显示模式.png image组件的四种缩放模式.png image组件的九种裁剪模式.png

4、踩坑说明

• 再循环列表中表示单元素数列，index表示索引下标，item表示索引元素，但是由对象元素构成的数组在js文件中怎么表示，在wxml中怎么表示？（大坑！见文章“列表渲染”）

在js中表示对象

//错误的对象定义方法：
var image_mode_size_change=[
  {scaleToFill:'不保持纵横比缩放图片，使图片的高度完全拉伸到填满image元素'},
  {aspectFit:'保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示出来'},
  {aspectFill:'保持纵横比缩放图片，只保证图片的短边能完全显示出来。即图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'},
  {widthFix:'宽度不变，高度自动变化，保持原图宽高比不变'}
]
//修改后的对象定义方法：
var image_mode_size_change={
  scaleToFill:'不保持纵横比缩放图片，使图片的高度完全拉伸到填满image元素',
  aspectFit:'保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示出来',
  aspectFill:'保持纵横比缩放图片，只保证图片的短边能完全显示出来。即图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取',
  widthFix:'宽度不变，高度自动变化，保持原图宽高比不变'
}

//总结：如何在js中定义对象
var 对象名{
  key1 : value1,
  key2 : value2,
  key3 : value3
}

在wxml中调用对象

//错误的调用方法：
<block wx:for="{{image_mode_size_change}}" wx:key="*this">
    <view>{{item.key}}:{{item.value}}</view>
    <view class="image_size">
      <image mode="{{item.key}}" src="{{source}}"></image>
    </view>
  </block>
//修改后的调用方法：
<block wx:for="{{image_mode_size_change}}" wx:key="*this">
    <view>{{index}}:{{item}}</view>
    <view class="image_size">
      <image mode="{{item.key}}" src="{{source}}"></image>
    </view>
  </block>

//总结：如何在wxml中调用对象
在wxml中对象的key用index调用，对象的value用item调用

——————————————————————

• 关于使用列表的方式定义多个对象的方案是否可行:答案是可行的，例如案例中的展示裁剪模式的时候，就用到了列表中定义对象作为列表元素的方法

//js列表中定义对象作为元素的方法（其中key1和key2是固定的，value1和value2是变化的）
var 列表名=[
{
key1 : value1,
key2 : value2,
},
{
key1 : value1,
key2 : value2,
},
{
key1 : value1,
key2 : value2,
}
]
//wxml中调用的方法：
使用“item.key”（注意key是明确的对象中键值），来调用value。

——————————————————————

• 图片显示混乱：

  
  错误结果.png

wxml:

<view class="image_setUp">
      <image mode="{{index}}" src="{{source}}"></image>
</view>

wxss:

//问题代码：
.image_setUp{
    height: 200px;
    width: 200px;
    background-color: rgb(184, 177, 177);
}
//修改后的代码：
.image_setUp{
    text-align: center;
    margin: 5px 0px;
}
image{
    height: 200px;
    width: 200px;
    background-color: rgb(17, 10, 10);
}

问题总结：在给图片设置大小的时候，在外层设置是没有用的，应该直接设置到图片自身。