Micro-channel component image applet is used to display images, it has several attributes:
1, src picture resources address
2, mode image cropping, scaling mode
3, binderror when an error occurs, the event name to publish AppService, events Object = {errMsg An event.detail: 'Wrong something'}
. 4, when the picture bindload finishes loading, the event name to publish AppService, the event object event.detail = {height: 'image height px', width: 'image width px '}
but the image has a default fixed width and height, so we are doing the picture adaptation of time, it is not good to do, especially when we are doing some of the product details page requires adaptive screen image, the original FIG scale. So how adaptive proportional image display it? There are two ways:
First, the use MODE: widthFix
widthFix: constant width, height automatically change the aspect ratio picture remains unchanged.
First, let's set the mode for the image widthFix, then add a picture to a fixed width rpx, such as: 730rpx.
Such a picture can also be adaptive. . Unit as rpx applet itself an adaptive display of
two, using dynamic adaptive bindload binding function.
We can bind to image a function that, as explained above bindload, we can get to the width and height of the original image.
They then calculate the aspect ratio of the rate. . Then set a width size (rpx), the resulting dynamic image width and height provided by the style. Code is as follows:
HTML Code:
<image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>js code:
Page({
data: {
images:{}
},
imageLoad: function(e) {
var $width=e.detail.width, //获取图片真实宽度
$height=e.detail.height,
ratio=$width/$height; //图片的真实宽高比例
var viewWidth=718, //设置图片显示宽度，左右留有16rpx边距
viewHeight=718/ratio; //计算的高度值
var image=this.data.images;
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
this.setData({
images:image
})
}
})Finally, through images [index] .width and images [index] .height to each of the image width and height is provided.
Original Address: http://www.qianduan8.com/1005.html