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

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

先上最终实现效果图  

 

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

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

 

代码部分

wxml:

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

 

最终代码

 

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

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