小程序-swiper的高随里面的图片高自适应
作者:互联网
<view class='index-bg' wx:if="{{dataInfo.img_src.length}}"> <swiper indicator-dots="true" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" bindchange="bindchange" style="height:{{imgheights[current]}}rpx;"> <block wx:if="{{dataInfo.img_src.length>0}}" wx:for="{{dataInfo.img_src}}" wx:key='index'> <swiper-item bindtap="yulanImg" data-index="{{index}}"> <view class='slide-navigator acea-row row-between-wrapper' hover-class='none'> <image src="{{item}}" class="slide-image" mode="widthFix" data-id='{{index}}' mode="widthFix" bindload="imageLoad"/> </view> </swiper-item> </block> </swiper> </view>
.index-bg image { width: 100%; height: auto; }
data: { indicatorDots: false, circular: true, autoplay: true, interval: 3000, duration: 500, dataInfo: { img_src: [] }, //详情页数据 //所有图片的高度 imgheights: [], //图片宽度 imgwidth: 750, //默认 current: 0 }, imageLoad: 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[e.target.dataset.id] = imgheight; this.setData({ imgheights: imgheights }) }, bindchange: function (e) { // console.log(e.detail.current) this.setData({ current: e.detail.current }) },
以上的笔记亲测有效!!
非常感谢博主‘梦幻飞雪’的笔记,转载于:https://www.cnblogs.com/wangyihong/p/8610956.html
标签:高自,imgwidth,imgheights,detail,current,var,imgheight,swiper,图片 来源: https://www.cnblogs.com/liuqingxia/p/15718676.html