一、概述：
在开发小程序的项目中，经常会用到swiper这个轮播组件，但是使用的时候会有一个问题，swiper系统会默认一个高度而且是px为单位的，如下:
swiper {
display:block;
height:150px;
}
这些参数可以用其它样式覆盖，但是图片不可能固定高度。image的高度是无法用px固定单位，一般是宽固定 rpx，mode="widthFix" 高度自适应。下面就开始介绍如何用图片在swiper自适应高度，而不会被遮住。
实际效果图如下：
二、实现过程：
1、小程序布局页面wxml
2、小程序 js页面
Page({
/**
* 页面的初始数据
*/
data: {
currentNavtab: 0,//当前第几个swiper
bannerlist: ["/lc10_yunzhuanma/09/25/17/59/5820beca6a5f2d8ad7ebcc9754bbf536_v2_MTMyNjA4NDE2/thumb/2_640_480.jpg", "/lc09_yunzhuanma/11/23/13/13/240be0b0ec63013fd97f1062b16b6043_v2_MTMzMjI3NDUy/thumb/2_640_480.jpg", "/lc10_yunzhuanma/11/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
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)
如果觉得《swiper高度自适应_小程序 swiper 图片高度自适应+预览图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
