Shulou(Shulou.com)05/31 Report--

This article mainly introduces "WeChat Mini Programs picture adaptive support multi-map how to achieve". In the daily operation, I believe that many people have doubts about how to realize WeChat Mini Programs picture adaptive support multi-map. The editor consulted all kinds of data and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the doubt of "WeChat Mini Programs picture adaptive support multi-map how to achieve"! Next, please follow the editor to study!

WeChat Mini Programs picture adaptive support multi-picture example detailed explanation

WeChat Mini Programs picture adaptation is a common requirement. Usually we only need to set max-width:100%. in WEBView. Although widthFix can also be realized in Wechat, there is a defect that the width of the picture should be greater than or equal to the set value, otherwise there will be tensile deformation, this paper uses another way to adapt.

First of all, let's take a look at some instructions given by the picture component:

Attribute name type default value description srcString

Picture resource address modeString'scaleToFill' picture cropping and zooming mode binderrorHandleEvent

When an error occurs, the event name published to AppService, event object event.detail = {errMsg: 'something wrong'} bindloadHandleEvent

When the picture is loaded, the event name posted to AppService, event object event.detail = {height:' picture height px', width:' picture width px'}

Note: image component default width 300px, height 225px

There are 13 modes in mode, of which 4 are zoom mode and 9 are cropping mode.

The mode states that scaleToFill does not maintain the aspect ratio to scale the picture, so that the width and height of the picture is completely stretched to fill the image element aspectFit to maintain the aspect ratio to zoom the picture, so that the long edge of the picture can be fully displayed. In other words, the picture can be displayed completely. AspectFill zooms the image with an aspect ratio, only ensuring that the short edges of the image are fully displayed. In other words, the picture is usually complete only in the horizontal or vertical direction, and the other direction will be intercepted. The width of widthFix remains the same, the height changes automatically, and the aspect ratio of the original image remains unchanged.

If there is a more appropriate solution, it is probably widthFix, but in the above modes, the premise is to set a width value or a height value for the image label. But sometimes we don't want to limit the width and height of the picture at all. what we need is that the picture itself can adapt according to its own size.

The widthFix mode requires that you first set a width value. What if the image is smaller than the given width? At this point, the picture will stretch. (it is commonly used in articles, because the illustrations in the article may be smaller than the default width, such as common expressions.)

In fact, in the tag above, the picture reserves a function bindLoad for us. Let's take a look at how I support adaptation.

There is a premise, that is, when there are multiple images, you need to know that the image is in all the positions index, we use this location to save the width and height of the picture.

Var px2rpx = 2, windowWidth=375;page ({data: {imageSize: {}}, onLoad:function (options) {wx.getSystemInfo ({success: function (res) {windowWidth= res.windowWidth; px2rpx = windowWidth;}})}, imageLoad:function (e) {/ / unit rpx var originWidth = e.detail.width*px2rpx, originHeight = e.detail.height*px2rpx, ratio = originWidth/originHeight Var viewWidth = 710 view else / set an initial width / / when its width is greater than the initial width, the actual effect is the same as mode=widthFix (originWidth > = viewWidth) {/ / the width is equal to viewWidth. Just ask for a height to achieve adaptive viewHeight = viewWidth/ratio;} else {/ / if the width is less than the initial value, do not scale viewWidth = originWidth; viewHeight = originHeight } var imageSize = this.data.imageSize; imageSize [e.target.dataset.index] = {width:viewWidth, height:viewHeight} this.setData ({imageSize:imageSize})}})

If our picture defines not only the width, but also the height value, for example, we limit the max-height and so on. Then our imageLoad function should be adjusted to output according to their aspect ratio.

ImageLoad:function (e) {var originWidth = e.detail.width * px2rpx, originHeight=e.detail.height * px2rpx, ratio = originWidth/originHeight; var viewWidth = 220 viewWidth/viewHeight; if (ratio > = viewRatio) {if (originWidth > = viewWidth) {viewHeight = viewWidth/ratio;} else {viewWidth = originWidth; viewHeight = originHeight} else {if (originWidth > = viewWidth) {viewWidth = viewRatio*originHeight} else {viewWidth = viewRatio*originWidth ViewHeight = viewRatio*originHeight;}} var image = this.data.imageSize; image [e.target.dataset.index] = {width:viewWidth, height:viewHeight} this.setData ({imageSize:image})}

Appendix: small image preview, enter full-screen mode.

Use the API,wx.previewImage (OBJECT) to preview the picture below is the corresponding code, style section, self-layout.

HTML Code:

JS

Page ({data: {pictures: ['https://cache.yisu.com/upload/ask_collection/20210725/111/131464.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/131465.jpg', 'https://cache.yisu.com/upload/ask_collection/20210725/111/131466.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/131467.jpg', 'https://cache.yisu.com/upload/ask_collection/20210725/111/131470.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/131471.jpg', 'https://cache.yisu.com/upload/ask_collection/20210725/111/131472.jpg',' https://cache.yisu.com/upload/ask_collection/20210725/111/131473.jpg']}, previewImage: function (e) {var that = this Index = e.currentTarget.dataset.index, pictures = this.data.pictures Wx.previewImage ({current: pictures [index], urls: pictures})}) at this point, the study on "how to support multi-graph adaptation for WeChat Mini Programs images" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.