Analysis of image adaptive implementation of wechat applet

Time:2020-2-15

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.

Recommended Today

Api: tiktok: user video list

Tiktok tiktok, tiktok, tiktok, Api, Api, jitter, voice, bullet screen comments, jitter, jitter, and jitter. Tiktok tiktok tiktok data, jitter data acquisition, live broadcast of shaking sound Titodata: professional short video data acquisition and processing platform. For more information, please contact:TiToData Massive data collection Collect 500 million pieces of data for customers every day Tiktok […]