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

<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>

.imgbox{
width: %;
margin-left: %;
}

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