微信小程序中使用swiper组件可以实现图片轮播效果，但是默认swiper高度是固定的150px，如果项目中图片大于固定高度就会被隐藏，所以本篇文章要实现轮播图片的高度自适应。
效果图：
wxml代码：
<swiper class="t-swiper" indicator-dots="{{indicatordots}}" indicator-active-color="{{color}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:{{height}}"> <block wx:for="{{img}}" wx:key=""> <swiper-item> <image src="{{item}}" mode="widthFix" bindload='goheight' /> </swiper-item> </block></swiper> |
wxss代码：
.t-swiper image { width: 100%;} |
js代码：
Page({ data: { img: [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg' ], indicatordots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 5000, //自动切换时间间隔 duration: 500, //滑动动画时长 color: '#ffffff', //当前选中的指示点颜色 height: '' //swiper高度 }, goheight: function (e) { var width = wx.getSystemInfoSync().windowWidth //获取可使用窗口宽度 var imgheight = e.detail.height //获取图片实际高度 var imgwidth = e.detail.width //获取图片实际宽度 var height = width * imgheight / imgwidth + "px" //计算等比swiper高度 this.setData({ height: height }) }}) |
不错
swiper-item 嵌套的image组件，bindload函数怎么没进去啊 被屏蔽了？
默认的image会有一个高度属性，所以在image标签里加上
style="height:{{height}}"