小程序--解决Swiper 图片高度自适应
时间:2018-09-25 15:25:40
收藏:0
阅读:1152
<swiper bindchange="bindchange" style="height:{{imgheights[current]}}rpx;" indicator-dots="{{indicatorDots}}" autoplay="false" circular =‘true‘ interval="5000" duration="1000"> <block wx:for="{{item.images}}" wx:for-item="itemName" wx:key=‘itemName‘> <swiper-item> <image bindload="imageLoad" data-id=‘{{index}}‘ src="{{itemName}}" class="slide-image" mode="widthFix" style=‘width:100%‘ /> </swiper-item> </block> </swiper>
Page({ data:{ imgheights: [],//所有图片的高度 current:0 } , imageLoad(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[e.target.dataset.id] = imgheight; console.log(‘图片的高度:‘+imgheights) this.setData({ imgheights: imgheights }) }, bindchange: function (e) {// current 改变时会触发 change 事件
this.setData({ current: e.detail.current })
},
})
评论(0)