一、概述：

在开发小程序的项目中，经常会用到swiper这个轮播组件，但是使用的时候会有一个问题，swiper系统会默认一个高度而且是px为单位的，如下:

swiper {

display:block;

height:150px;

}

这些参数可以用其它样式覆盖，但是图片不可能固定高度。image的高度是无法用px固定单位，一般是宽固定 rpx，mode="widthFix" 高度自适应。下面就开始介绍如何用图片在swiper自适应高度，而不会被遮住。

实际效果图如下：

二、实现过程：

1、小程序布局页面wxml

2、小程序 js页面

Page({

/**

* 页面的初始数据

*/

data: {

currentNavtab: 0,//当前第几个swiper

bannerlist: ["http://i2.letvimg.com/lc10_yunzhuanma/201709/25/17/59/5820beca6a5f2d8ad7ebcc9754bbf536_v2_MTMyNjA4NDE2/thumb/2_640_480.jpg", "http://i1.letvimg.com/lc09_yunzhuanma/201711/23/13/13/240be0b0ec63013fd97f1062b16b6043_v2_MTMzMjI3NDUy/thumb/2_640_480.jpg", "http://i1.letvimg.com/lc10_yunzhuanma/201711/23/14/02/c3faf8192281dd307c74957259cf6de3_v2_MTMzMjI3OTEw/thumb/2_640_480.jpg"],//图片切换数组

indicatorDots: true,

autoplay: true,

interval: 5000,

duration: 500,

scrollWidth: 0,

imgheights: []

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that=this;

wx.getSystemInfo({

success: function (res) {

//获取屏幕的宽度并保存

that.setData({

scrollWidth: res.windowWidth

});

}

});

},

/*** 预览图片****/

previewImage: function (e) {

var current = e.currentTarget.dataset.src;

wx.previewImage({

current: current,// 当前显示图片的http链接

urls: this.data.bannerlist // 需要预览的图片http链接列表

})

},

//等比缩放图片并保存

imageLoad: function (e) {

//获取图片真实宽度

var imgwidth = e.detail.width,

imgheight = e.detail.height,

//宽高比

ratio = imgwidth / imgheight;

//console.log(imgwidth, imgheight);

//计算的高度值

var viewHeight = parseInt(this.data.scrollWidth) / ratio;

var imgheight = viewHeight.toFixed(0);

var imgheightarray = this.data.imgheights;

//把每一张图片的高度记录到数组里

imgheightarray.push(imgheight);

this.setData({

imgheights: imgheightarray,

});

},

swiperChange: function (e) {

//console.log(e.detail.current);

this.setData({

currentNavtab: e.detail.current

})

}

})

三、结语：

小程序使用起来还是比较麻烦需要去获取图片的真实高度，然后等比缩放，在swiperChange的时候去动态改变高度。

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)