微信小程序 swiper 轮播图高度自适应

小程序中使用swiper 组件，实现轮播图高度自适应效果。

先上最终实现效果图

先看一下微信官方文档介绍 swiper 组件

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html>

代码部分

wxml:
<view class='images'> <swiper class='detail-imgs' indicator-dots="{{true}}"
autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}"
bindchange='bindchange' style="height:{{imgheights[current]}}rpx;"> <block
wx:for="{{imgUrls}}"> <swiper-item style=""> <image src="{{item}}"
class='image-view'
style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"
bindload="imageLoad" data-src='{{item}}'></image> </swiper-item> </block>
</swiper> </view>
js:
Page({ data: { imgheights: [], current: 0, imgwidth: 750, imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'https://img3.doubanio.com/view/photo/l/public/p2494946035.webp',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg', ], },
imageLoad: function (e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight =
e.detail.height, src = [], //宽高比 ratio = imgwidth / imgheight;
console.log(e.target.dataset['src']) src.push(e.target.dataset['src'])
console.log(src) //计算的高度值 var viewHeight = 750 / ratio; var imgheight =
viewHeight var imgheights = this.data.imgheights //把每一张图片的高度记录到数组里
imgheights.push(imgheight) this.setData({ imgheights: imgheights, }) },
bindchange: function (e) { this.setData({ current: e.detail.current }) }, })
思路是这样滴，，，在图片加载时通过 bindload imageLoad 将每张图片的宽高取出，计算好高度，存入数组。swiper 组件
通过bindchange 监听图片切换将当前图片的在数组中的位置（swiper组件中的位置）赋值 current ，以此动态的改变页面
图片和swiper的高度。。。但是，无意中发现一个问题，imageLoad 中打印图片的 src 发现
顺序有时和图片真实的顺序是不一致的，把大图放在数组前面，但是却是第三个第四个加载出来的。这就坑了，，导致加载出来计算的图片高度数组顺序和真实的不一致。bindload
获取的图片顺序不正确，不知道是不是因为图片资源大小的缘故，故加了一个参数，严谨一点。。如果接口提供的参数里返回了图片的原始宽高也可以不用这么做。

在imageLoad中打印 index 哇果然顺序是有误的。

最终代码
<view class='images'> <swiper class='detail-imgs' indicator-dots="{{true}}"
autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}"
bindchange='bindchange' style="height:{{imgheights[current]}}rpx;"> <block
wx:for="{{imgUrls}}" wx:key="{{index}}"> <swiper-item style=""> <image
src="{{item}}" class='image-view'
style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"
bindload="imageLoad" data-src='{{item}}' data-index='{{index}}'></image>
</swiper-item> </block> </swiper> </view>

Page({ data: { imgheights: [], current: 0, imgwidth: 750, imgUrls: [
'https://img3.doubanio.com/view/photo/l/public/p2494946035.webp',
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg', ], },
imageLoad: function (e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight =
e.detail.height, //宽高比 ratio = imgwidth / imgheight; //计算的高度值 var viewHeight =
750 / ratio; var imgheight = viewHeight var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里 imgheights[e.target.dataset['index']] = imgheight;// 改了这里
赋值给当前 index this.setData({ imgheights: imgheights, }) }, bindchange: function
(e) { this.setData({ current: e.detail.current }) }, })
这次没什么问题了把图片较大的放在数组前面，检验一下就知道了

热门工具换一换

微信小程序 swiper 轮播图 高度自适应