微信小程序之swiper轮播图中的图片自适应高度的方法

微信小程序Swiper轮播图图片自适应高度方法 微信小程序中的Swiper轮播图是非常常用的功能，但是官方提供的示例中，Swiper的高度是固定的150px，这样如果传入的图片大于这个高度就会被隐藏。为了解决这个问题，我们需要让图片自适应不同分辨率。 我们需要获取屏幕宽度，然后获取图片的宽高，最后等比设置当前屏幕宽度下Swiper的高度。 在页面的结构中，我们需要添加一个Swiper组件，并绑定图片加载的事件。同时，我们需要在image标签中添加mode="widthFix"属性，以便图片能够自适应宽度。 ```html <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/> </swiper-item> </block> </swiper> ``` 在page中，我们需要定义数据和图片加载事件的处理函数。 ```javascript 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:"" }, imgHeight:function(e){ var winWid = wx.getSystemInfoSync().windowWidth; var imgh=e.detail.height; var imgw=e.detail.width; var swiperH=winWid*imgh/imgw + "px" this.setData({ Height:swiperH }) } ``` 在imgHeight函数中，我们首先获取当前屏幕的宽度，然后获取图片的宽高，最后等比设置当前屏幕宽度下Swiper的高度。 需要注意的是，在小程序中动态设置属性只能通过setData（{ }）来设置，而不能直接操作css样式。此外，如果image外层有个容器装，然后image设置width为100%之后，距离装它的容器底部有一点距离，这是因为image是默认设置的display:inline-block属性，这个属性会产生间隙。如果要撑满容器，设置为display:block就可以了。 通过这篇文章，我们可以了解到微信小程序Swiper轮播图图片自适应高度的方法，并且学会了如何使用wx.getSystemInfoSync().windowWidth来获取当前屏幕的宽度，以及如何使用setData（{ }）来动态设置Swiper的高度。