回复 刷新

暂无评论

微信小程序开发实战(13):图像组件(image)

image可以用来显示图像,这些图像可以是本地的,也可以是网络图像。例如,下面的布局代码显示了本地图像。

<view style="margin:20px"> <view style="margin-bottom:20px">本地图像</view> <image src="../../resources/book.png" style="height:300px;width:240px" /> </view>

其中src属性指定了图像源,这里是本地图像文件路径。

下面的布局代码显示从网络上下载的图像。

<view> <view style="margin-bottom:20px">从网络上获取图像</view> <image src="http://geekori.cn/img/weixin_code.png" style="height:300px;width:300px" bindload="bindload" /> </view>

其中bindload属性指定当图像装载成功后调用的事件函数,从e.detail中可以获取图像的实际高度和宽度。bindload函数的代码如下:

bindload:function(e) { console.log(e.detail) }

装载图像后,会在Console中显示如图3所示的信息。我们会看到,height和width都是344,这是图像的实际物理像素。

标签还有一个mode属性,该属性用于设置图像显示模式,分为缩放和裁剪两种模式。缩放模式有3种,裁剪模式有9种,一共12种模式。这些模式的描述如下:

缩放模式

  1. scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 区域
  2. aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
  3. aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

裁剪模式

  1. top:不缩放图片,只显示图片的顶部区域
  2. bottom:不缩放图片,只显示图片的底部区域
  3. center:不缩放图片,只显示图片的中间区域
  4. left:不缩放图片,只显示图片的左边区域
  5. right :不缩放图片,只显示图片的右边区域 top
  6. left:不缩放图片,只显示图片的左上边区域 top
  7. right:不缩放图片,只显示图片的右上边区域 bottom
  8. left:不缩放图片,只显示图片的左下边区域 bottom
  9. right:不缩放图片,只显示图片的右下边区域

例如,将mode属性值设为top,并且width和height都是200px,布局代码如下:

<view> <view style="margin-bottom:20px">从网络上获取图像</view> <image mode="top" src="http://geekori.cn/img/weixin_code.png" style="height:200px;width:200px" bindload="bindload" /> </view>

由于图像的宽度和高度都是344px,所以200px无法显示完整的图像,因此,会从顶部截取200px显示。

如果src属性指定的图像路径错误,那么图像不会正常显示,如果想得知图像是否能成功显示,可以设置binderror属性,该属性指定一个函数名,当图像显示错误是调用,布局代码如下:

<view> <view style="margin-bottom:20px"> error image</view> <image src="error url" binderror="imageError" /> </view> imageError函数的代码如下: imageError: function(e) { console.log('image3发生error事件,携带值为', e.detail.errMsg) }

程序装载后,会在Console中输出如图5所示的信息。

在这里插入图片描述

图5 装载图像错误是输出的信息

  • 51
  • 0
  • 0