How to set the carousel image in the WeChat applet to an adaptive height

This time I will show you how to set the carousel image in the WeChat applet to an adaptive height. What are the precautions for how to set the carousel image in the WeChat applet to an adaptive height? Here is a practical case, let's take a look. one time.

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

Dynamicly set properties in the mini program can only be set through setData ({ }), which is the same as directly operating css styles in js A bit similar to

Note: If the image is contained in an outer container, and then after the image is set to have a width of 100%, it will be a little distance from the bottom of the container in which it is contained, that is because the image has the default display: inline- block attribute, this attribute will create gaps. 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

Detailed explanation of JS facade mode use cases

JS try-catch statement and error type use

The above is the detailed content of How to set the carousel image in the WeChat applet to an adaptive height. For more information, please follow other related articles on the PHP Chinese website!