This article mainly introduces the self-adaptive implementation and analysis of wechat applet pictures. The example code is introduced in detail in this article, which has a certain reference learning value for everyone’s study or work. You can refer to the following for friends who need it
How to adapt the picture of wechat applet
In daily business scenarios, many places need to display pictures in a list, but there is a problem. Because the specifications of each uploaded picture are not the same, the picture will be too large, too small, or stretched, as shown in the following figure
In this case, my idea is to use the bindload attribute in the image tag for calculation. The introduction of the bindload attribute is as follows
Here is the specific method flow
1. First of all, we need to add width and height to the view container of image tag, and use Wx: for to traverse and render. We pass in the index value through the custom attribute data-i, and I also add the dynamic attribute to the container, that is, the image will not exceed the size of the whole container after calculation, resulting in layout disorder
<block wx:for="{{list_1}}" wx:key="{{index}}">
<view style="width:{{imgmsg?imgmsg[index].width:''}}px;height:{{imgmsg?imgmsg[index].height:''}}px">
<image style="width:{{imgmsg[index].width}}px !important;height:{{imgmsg[index].height}}px !important;"
src="{{item.url}}"
bindload="imageLoad"
data-i="{{index}}" />
</view>
</block>2. In JS, the simulation data is defined, and the image attribute null object is defined. The image width and height attributes of the corresponding subscript are put into the object through the key value
page({
data:{
list_1: [{ url: '../../img/1.jpg' }, { url: '../../img/2.jpg' }, { url: '../../img/3.jpg' }, { url: '../../img/4.jpg' }],
imgmsg:{}
}
})3. Add the imageload method to calculate the size of the image. Here we can get the width and height of the image container through the Wx. Createselectorquery() method and the original width and height of the image through the event object. The specific methods are as follows
//Show picture adaption
imageLoad(e) {
//API for getting the properties of applet nodes
const query = wx.createSelectorQuery()
Var imgw = e.detail.width, // the original width of the picture
Imgh = e.detail.height, // image original height
Index = e.currenttarget.dataset. I, // image subscript
Ratio = imgw / imgh, // image aspect ratio
Image = this.data.imgmsg, // index object with image width and height
that = this,
Vieww = null, // container width
View = null; // container height
query.select('.top_img').boundingClientRect(function(res) {
viewW = res.width;
viewH = res.height;
//Because the size of the picture is not certain, the width and height of the picture may exceed the whole picture container, so the width and height of the picture itself are used to judge
If (imgw > imgh | | imgw > View) {// when the width of the picture itself is larger than the height of the picture itself, the width of the picture is equal to the width of the container to calculate the height of the picture
imgw = viewW;
imgh = imgw / ratio;
}Else if (imgw < imgh | imgh > View) {// when the width of the image itself is less than the height of the image itself, the height of the image is equal to the height of the container to calculate the width of the container
imgw = viewH * ratio;
imgh = viewH;
}
//The width and height attributes of the image after calculation are stored in the object according to the subscript, and rounded by the floor method of math
image[index] = {
width: Math.floor(imgw),
height: Math.floor(imgh)
}
//Update view
that.setData({
imgmsg: image
})
})
query.exec()
},OK, here we can see the specific results
The simple list image adaptive function is realized, but this method can also be expanded and optimized. If there are good ideas, we can learn and communicate together to improve together
The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.