swiper内的图片根据屏幕宽度,等比例缩放,自适应
swiper组件内的图片,图片的显示宽高根据屏幕的宽度自适应
图片的宽度等于屏幕的宽度,然后图片的实际宽度和屏幕的实际宽度产生一个比例,比如屏幕宽度300,原图实际宽度600,原图实际高度为800,则图片显示宽度为300,图片高度为400。
计算方法:屏幕宽度(图片宽度)/实际宽度=图片高度/图片实际高度
图片显示高度=屏幕宽度(图片宽度)/实际宽度*图片实际高度
<swiper style="width:100%;height:{{imgHeight}}px"> <swiper-item> <image src="{{cityPic}}" style="width:{{imgWidth}}px;height:{{imgHeight}}px" bindload="getHeight" ></image> </swiper-item> </swiper> |
通过图片组件的bindload事件,当图片载入完毕时触发,获取图片高度 event.detail = {height, width}
getHeight(e){ //动态设置图片的宽度和高度 var res = wx.getSystemInfoSync() var screenWidth = res.windowWidth //屏幕宽度 var imgWidth = e.detail.width //图片实际宽度 var imgHeight = e.detail.height //图片实际高度 this.setData({ imgWidth: screenWidth, //图片显示宽度 = 屏幕宽度 imgHeight: screenWidth * imgHeight / imgWidth // 计算图片显示高度 }) console.log(e) } |