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

发布时间：2018-07-20 15:34,

浏览次数：588

, 标签：

swiper

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

先上最终实现效果图

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

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

代码部分

wxml:

autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}"

bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">

wx:for="{{imgUrls}}">

class='image-view'

style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"

bindload="imageLoad" data-src='{{item}}'>

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 哇 果然 顺序是有误的。

最终代码

autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}"

bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">

wx:for="{{imgUrls}}" wx:key="{{index}}">

src="{{item}}" class='image-view'

style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"

bindload="imageLoad" data-src='{{item}}' data-index='{{index}}'>

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 }) }, })

这次没什么问题了 把图片较大的放在数组前面，检验一下就知道了