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

In this article, the editor introduces in detail "WeChat Mini Programs how to achieve the picture adaptive height in the swiper round picture". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "WeChat Mini Programs how to achieve the picture adaptive height in the swiper round map" can help you solve your doubts.

The carousel picture in Mini Program is very simple, and there are official examples, but the only drawback is that swiper is a fixed 150px height, so that if the incoming image is greater than this height, it will be hidden. Hot, how to make the picture adaptive to different resolutions.

My idea is: get the screen width, get the width and height of the picture, and then proportionally set the height of the swiper under the current screen width.

1. structure

/ / bindload is an event that binds image loading. Remember to add the attribute "widthFix" of mode= to image, and set the width of image 100%.

The various attributes of swiper are in the official documentation, which is not explained here. The most important thing is: style='height: {{Height}}'/ / dynamically set the height of swiper

two。 In page:

Data: {imgUrls: ['.. / img/goodsDetail/goods.png','.. / img/goodsDetail/goods.png','.. / img/goodsDetail/goods.png'], indicatorDots: true, autoplay: true, interval: 5000, duration: 1300, bg:'# C79C77height, Height: "/ / this is the height property to be dynamically set by swiper} ImgHeight:function (e) {var winWid = wx.getSystemInfoSync () .windowWidth / / get the width of the current screen, var imgh=e.detail.height;// picture height, var imgw=e.detail.width;// picture width, var swiperH=winWid*imgh/imgw + "px" / / set the height of swiper proportionally. That is, screen width / swiper height = picture width / picture height = = "swiper height = screen width * picture height / picture width this.setData ({Height:swiperH// setting height})}

Summary: get the current screen width: wx.getSystemInfoSync (). WindowWidth

Dynamically setting properties in Mini Program can only be set through setData ({}), which is a bit similar to directly manipulating css style in js.

Note: if image has a container on the outside, and then image sets width to 100%, it is a little away from the bottom of the container in which it is installed, it is because image is the default display:inline-block property, which creates a gap. If you want to fill the container, set it to display:block.

After reading this, the article "how to achieve the self-adaptive height of pictures in the swiper rotation map" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.