微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
小程序中的轮播图很简单，但是唯一的缺陷就是 swiper 是固定的150px 高度（320px 宽度），这样如果传入的图片大于这个高度就会被隐藏。那么如何让图片自适应不同分辨率是一个很重要的问题。
一种思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下 swiper 的高度。
1、wxml 结构
<swiper autoplay circular indicator-dots style="height: {{swiperHeight}};"><swiper-item wx:for="{{swiperData}}" wx:key="id">// 注意设置 mode="widthFix" 和 style="width: 100%;"<image mode="widthFix" src="{{item.image_src}}" style="width: 100%;" bindload="computeImgHeight"></image></swiper-item></swiper>
2、js 文件
Page({data: {swiperHeight: "",// swiper的高度},computeImgHeight(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({swiperHeight: swiperH//设置swiper高度})}})
