微信小程序 swiper自适应图片的高度
作者:互联网
<view class="page-section page-section-spacing swiper"> <swiper indicator-dots="{{indicatorDots}}" bindchange="swiperChange" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:{{imgheights[current]}}rpx;"> <block wx:for="{{background}}" wx:key="*this"> <swiper-item wx:key="*this" style="position: absolute;width: 100%;z-index:1;"> <image src="{{item}}" class="slide-image" class='img' bindload="imgLoad"/> </swiper-item> </block> </swiper> </view>
Page({ onShareAppMessage() { return { title: 'swiper', path: 'page/component/pages/swiper/swiper' } }, data: { imgwidth: 750, imgheights: [], }, imgLoad: function (e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; // console.log(imgwidth, imgheight) //计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //每一张图片对应的高度存到数组里 imgheights.push(imgheight); this.setData({ imgheights: imgheights }) } })
标签:imgwidth,微信,750,imgheights,var,imgheight,swiper,图片 来源: https://www.cnblogs.com/bhj37/p/14783663.html