How to adapt images in WeChat mini programs to the height of the model

This time I will show you how to adapt the pictures in the WeChat mini program to the height of the model. What are the precautions for the pictures in the WeChat mini program to adapt to the height of the model. The following is a practical case, let's take a look. take a look.

The carousel image in the mini program is very simple, and there are official examples. However, the only flaw is that the swiper has a fixed height of 150px, so if the incoming image is larger than this height, it will be hidden. What, how can I make pictures adapt to different resolutions?

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

1. Structure

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style=&#39;height:{{Height}}&#39;>
   <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix" bindload=&#39;imgHeight&#39;/>  //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟
    </swiper-item>
   </block>
</swiper>

The various attributes of swiper are available in the official documents and will not be explained here. The most important thing is: style='height:{{Height}}' //Dynamicly set the height of the swiper

2. In the page:

data: {
  imgUrls: [          
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png'
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 5000,
  duration: 1300,
  bg: '#C79C77',
  Height:""     //这是swiper要动态设置的高度属性
 },
imgHeight:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
  var imgh=e.detail.height;//图片高度
  var imgw=e.detail.width;//图片宽度
  var swiperH=winWid*imgh/imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
  this.setData({
    Height:swiperH//设置高度
  })
},

Summary: Get the current screen width: wx .getSystemInfoSync().windowWidth

Dynamic setting of attributes in the mini program can only be set through setData({ }), which is a bit similar to directly operating css styles in js

Note: if image There is a container in the outer layer, and then after the width of the image is set to 100%, it is a little distance from the bottom of the container where it is placed. That is because the image has the display:inline-block attribute set by default. This attribute will Create a gap. If you want to fill the container, just set it to display:block.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use jquery settings to open external links in a new window

jquery js gets focus control image

How to get the Get parameters in Url

The above is the detailed content of How to adapt images in WeChat mini programs to the height of the model. For more information, please follow other related articles on the PHP Chinese website!