小程序数组型图片自适应效果的实现(交流QQ群：604788754)

//本例代码如有问题，请加群，下载今日日期文件，测试。(如对本例有疑问，也可加群咨询群主)

WXML:

<view class="imgbox">

  <block wx:for="{{imgarr}}" wx:for-item='item' wx:for-index='idx'>

    <image src="{{imgarr[idx]}}" data-id="{{idx}}" bindload="imageLoad" style="width:{{viewWidthArr[idx]}}px; height:{{viewHeightArr[idx]}}px"></image>

  </block>

</view>

WXSS:

.imgbox{

  width: %;

  margin-left: %;

}

JS:

Page({

  data: {

    imgarr: ['http://img35.photophoto.cn/20150512/0035035061753190_s.jpg', 'http://img.mp.itc.cn/upload/20160923/436c0efb4f58437089699cecd9d62f38_th.jpg', 'http://photocdn.sohu.com/20070701/Img250855658.jpg'],

    /*图片列表的高度值数组*/

    viewHeightArr: [],

    viewWidthArr: []

  },

  onLoad: function () {

    /*获取用户屏幕的实际宽度，取94%的宽度,把取到的值付给缓存*/

    wx.getSystemInfo({

      success: function (res) {

        var screenWidth = parseInt(res.screenWidth * 0.94);

        wx.setStorageSync('screenWidth', screenWidth);

      },

    });

    //获取缓存中屏幕的宽度

    var screenWidth = wx.getStorageSync('screenWidth');

    this.setData({

      screenWidth: screenWidth

    });

  },

  imageLoad: function (res) {

    var dataid = res.currentTarget.dataset.id;

    //获取图片高度数组

    var viewHeightArr = this.data.viewHeightArr;

    //获取图片宽度数组

    var viewWidthArr = this.data.viewWidthArr;

    /*判断图片的实际宽度是否大于缓存中屏幕的宽度，如果大于就取屏幕的宽度作为图片的宽度，如果小于屏幕的宽度，图片的宽度和高度就设置为图片的实际宽度*/

    //获取屏幕宽度

    var screenWidth = this.data.screenWidth;

    //获取图片实际宽度

    var imgwidth = res.detail.width;

    //获取图片的实际高度

    var imgheight = res.detail.height;

    if (imgwidth > screenWidth) {

      //获取图片的宽高比例值

      var ratio = imgwidth / imgheight;

      //设置图片自适应的高度

      var viewHeight = parseInt(screenWidth / ratio);

      //根据实际加载的图片id来赋值给数组

      //把图片的高度付給数组

      viewHeightArr[dataid]=viewHeight;

      //把图片的宽度付給数组

      viewWidthArr[dataid] = screenWidth;

    } else {

      /*图片的实际尺寸小于屏幕的宽度，就取图片的实际宽高来设为图片的宽高*/

      viewHeightArr[dataid] = imgheight;

      //把图片的宽度付給数组

      viewWidthArr[dataid] = imgwidth;

    };

    this.setData({

      viewWidthArr: viewWidthArr,

      viewHeightArr: viewHeightArr

    });

    // console.log(viewWidthArr);

    // console.log(viewHeightArr);

  }

})