1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序实现轮播图根据图片大小自适应高度

微信小程序实现轮播图根据图片大小自适应高度

时间:2022-02-18 16:43:25

相关推荐

微信小程序实现轮播图根据图片大小自适应高度

上效果图

话不多说——————上代码

首先wxml

<swiper class="con_img" style="height:{{swiperheight}}px" indicator-dots="true" autoplay="true" indicator-active-color="#f8e112" bindchange="changeheight"><block wx:for="{{swiper_img}}"><swiper-item><image src="{{item.img}}" bindload='goheight' mode="widthFix"></image></swiper-item></block></swiper>

bindload='goheight' 写goheight函数在加载图片的时候计算出图片的高度

bindchange="changeheight"写changeheight函数在更换图片时改变swiper的高度

js部分代码

计算图片自适应高度goheight:function (e) {const { height } = this.data;var width = wx.getSystemInfoSync().windowWidth//获取可使用窗口宽度var imgheight = e.detail.height//获取图片实际高度var imgwidth = e.detail.width//获取图片实际宽度var he = width * imgheight / imgwidth//计算等比swiper高度height.push(he)将计算出来的高度记录在数组height数组中this.setData({swiperheight:this.data.height[0]})//先执行一次更换swiper高度的代码,因为changeheight函数第一张轮播图出来时不会触发},改变swiper高度changeheight:function(e){this.setData({swiperheight:this.data.height[e.detail.current]取出height中对应的高度,赋值给swiperheight})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。