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

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

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: 94%;
  margin-left: 3%;
}

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