Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to set a fixed proportion of pictures by WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Sometimes our picture is not the same proportion, but we need to set the picture to maintain a fixed proportion, in Mini Program, because the width is fixed to 750rpx, so if we need to set the aspect ratio to 2: 1, then directly set the width of the picture css to a fixed value, and then the height is half of the fixed value on it. In this way, the set ratio can be maintained under different screens.

But this is not very convenient, for example, I want to encapsulate a custom component as the Cell of the list (I was an iOS developer. As long as I set the width of the list, the width and height of the picture in Cell will be set.

Calling js operation DOM cannot directly manipulate DOM in Mini Program, but Wechat also provides an interface: wxml node information API

1. When the component is not encapsulated, we can use it in the onShow method in the js file:

OnShow: function () {var that = thisvar query = wx.createSelectorQuery () query.select ("# image") .boundingClientRect (function (res) {console.log (res.width) that.setData ({height: res.width * 0.5 + 'px'})}). Exec ()} set the width of the picture in css and set the picture in wxml:

At this point, when we set the width of the parent view of the picture to any value, the picture will maintain the ratio of 2:1.

2. In custom components, we need to use the following in the ready method:

Ready:function () {var that = thisvar query = wx.createSelectorQuery () .in (this) / / there are in (this) query.select ("# image") .boundingClientRect (function (res) {console.log (res.width) that.setData ({height: res.width * 0.5 + 'px'})}) .exec ()} the CSS and WXML settings in the component are the same as above.

Here is a simple DEMO of the encapsulated component:

Put the encapsulated components into the scrollView

Put the encapsulated components into the list page

As long as you set the style of the component, the picture and content will match perfectly.

This is the end of the content of "how to set the fixed proportion of pictures by WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.