在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
//本例代码如有问题,请加群,下载今日日期文件,测试。(如对本例有疑问,也可加群咨询群主) 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); } })
|
请发表评论