微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应。
效果图:
swiper轮播
wxml代码:
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 }) }})