方法一
1、视图
<image src='' bindload="imageLoad" style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>
2.1、在data中定义宽高
data:{
imgwidth: 0,
imgheight: 0,
}
2.2、和onLoad同级方法
imageLoad: function(e) {
var $width = e.detail.width; //获取图片真实宽度
var $height = e.detail.height; //获取图片真实高度
this.setData({
imgwidth: $width,
imgheight: $height
})
},
方法二
蒙层居中：
1、视图
<view catchtouchmove='move' class='mongolia'>
<view class='popup'>
</view>
</view>
2、样式
.mongolia {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 99999;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
max-height: 100%;
/* background-color: #fff; */
transform: translate3d(-50%, -50%, 0);
z-index: 999999;
width: 100%;
text-align: center;
}
蒙层显示时候，底部不可以滚动
move: function() {},
<view catchtouchmove="return">
<view catchtouchmove="return"></view>
<view> // 有需要滚动的列表不要加 catchtouchmove="return", 否则列表无法滚动
<view>滚动列表</view>
</view>
</view>
vue的pc端
（1）获取图片的实际大小
getImageInfo(url, callback) {
var img = new Image();
img.src = url;
if(img.complete) {
// 如果图片被缓存，则直接返回缓存数据
callback(img.width, img.height);
} else {
img.onload = function() {
callback(img.width, img.height);
}
}
},
（2）调用
this.getImageInfo(url, function(width, height) {
// 在这里面使用
console.log(width);
console.log(height);
})
