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);
}
问题总结：在给图片设置大小的时候，在外层设置是没有用的，应该直接设置到图片自身。
网友评论