微信小程序swiper组件中图片自适应

index.wxml

utoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{activeColor}}" 
 bindchange="bindchange" style="height:{{imgheights[current]}}rpx;">
  imgurls}}" wx:key="image">
    
      
    
  

index.js

imgurls: [
'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'
    ],indicatorDots: true,autoplay: true,interval: 4000,duration: 1000,activeColor:"#1472e0",//所有图片的高度  
    imgheights: [],//图片宽度  
    imgwidth: 750,//默认  
    current: 0
},imageLoad: function (e) {
    //获取图片真实宽度  
    var imgwidth = e.detail.width,imgheight = e.detail.height,//宽高比  
      ratio = imgwidth / imgheight;
    console.log(imgwidth,imgheight);
    //计算的高度值  
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight;
    var imgheights = this.data.imgheights;
    //把每一张图片的高度记录到数组里  
    imgheights.push(imgheight);
    this.setData({
      imgheights: imgheights,})
  },bindchange: function (e) {
    console.log(e.detail.current)
    this.setData({ current: e.detail.current })
  }
})

swiper中默认高度150px,使用bindchange="bindchange" style="height:{{imgheights[current]}}rpx;",使其高度变为当前选中图片的高度

其二，下面的单位为px而非rpx。

utoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{activeColor}}" 
   bindchange="bindchange" style="height:{{auto[cur].height}}px;">
  
    
      
    
  

Page({
  data: {
    image: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',activeColor: "#1472e0",auto:{},cur:0
  },imageLoad: function (e) {
    var imageWidth = e.detail.width,//获取图片真实宽度
        imageHeight = e.detail.height,Imagescale = imageWidth / imageHeight; //宽高比
    var autoWidth = '',//自适应高宽
        autoHeight = '';
    wx.getSystemInfo({
      success: function(res) {
        autoWidth = res.windowWidth; //设备屏幕宽度
        autoHeight = autoWidth / Imagescale; //计算图片自适应高 
      }
    });
    var image = this.data.auto;
    image[e.target.dataset.index] = {
      width: autoWidth,height: autoHeight
    }
    console.log(image);
    this.setData({
      auto:image
    })
  },bindchange: function (e) {
    this.setData({ cur: e.detail.current })
  }
})