How to operate the adaptive height of pictures in the swiper carousel

This time I will show you how to operate the adaptive height of the pictures in the swiper carousel chart, and what are the precautions for operating the adaptive height of the pictures in the swiper carousel chart. The following is a practical case, let's go together. 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 react with antd components to implement a management system

Summary of js image conversion to base64 method

The above is the detailed content of How to operate the adaptive height of pictures in the swiper carousel. For more information, please follow other related articles on the PHP Chinese website!