Part of the practices on small micro-channel picture-adaptive program

Practices on small micro-channel picture-adaptive program

In the ordinary course of business scenario, many places are required to display a list of the picture, but there is such a problem, due to the size of each uploaded picture is not the same, the picture will happen either too large or too small, or pulled extending the case, as FIG.

For this situation, my idea is to use bindload property within the image to calculate label, introduced bindload attribute is as follows

 

The following is a specific process flow

1, first of all we were on the page layout, just give view of the container label image width and height to add and use wx: for traversing rendering Custom attributes data-i passed index value, I also joined container the dynamic properties, is to calculate the picture does not exceed the size of the entire layout of the vessel leads to confusion

<block wx:for="{{list_1}}" wx:key="{{index}}">
   <view class="top_img" 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, is defined in the js analog data, and image property space defined object into the object by key value corresponding to the target image width and height properties

page({
    data:{
        list_1: [{ url: '../../img/1.jpg' }, { url: '../../img/2.jpg' }, { url: '../../img/3.jpg' }, { url: '../../img/4.jpg' }],
        imgmsg:{}
    }
})

3, a method to add imageLoad calculated image size, we can here to acquire image width and height of the container by wx.createSelectorQuery () method to obtain an image of the original width and height of the object by the event, as follows

// display image adaptive 
  ImageLoad (E) {
     // Get the node attributes applet API 
    const Query = wx.createSelectorQuery ()
     var imgw = e.detail.width, // image original width 
      imgh = e.detail.height, // image original height 
      index = e.currentTarget.dataset.i, // picture index 
      ratio = imgw / ImgH, // picture aspect ratio 
      image = the this .data.imgmsg, // image width and height of the object index 
      that = the this ,
      viewW = null , // container width 
      viewH = null ; // height of the container 
    . query.select ( '. top_img') boundingClientRect ( function (RES) {
      viewW = res.width; 
      viewH = res.height;
       // Since the size of the picture is not necessarily possible over the whole picture width and height of the container would, therefore there is determined the multi-wide high picture itself carried 
      IF (imgw> ImgH || imgw> viewW) { // when the image width wider than its own high picture, the picture is equal to the width of the container, to calculate a picture of high 
        imgw = viewW;
        imgh = imgw / ratio;
      } The else  IF (imgw <ImgH || ImgH> viewH) { // when the image is smaller than the width of its own high picture, the higher the high width of the container, to calculate a picture of the container 
        imgw * = viewH ratio;
        imgh = viewH;
      }
      // the width and height attributes stored in the image is calculated according to the index object, and uses the math floor rounding method 
      Image [index] = {
        width: Math.floor(imgw),
        height: Math.floor(imgh)
      }
      // Update the view 
      that.setData ({
        imgmsg: image
      })
    })
    query.exec()
  },

Well, here, we can look up specific results

 

 

 Simple list of images to achieve the adaptive function, but this method can be extended and optimized, if there is a good exchange of ideas can learn together and improve together