在项目中由于需要上传不同的轮播图片,但是图片可能尺寸不一样,导致会显示图片变形,很难看,所以最后弄了一个图片自适应的组件,可以解决这个问题.
实现原理
其实实现就是获取到每张图片的宽高,然后根据每张图片的,结合当前屏幕的宽度,计算出需要的最大高度,因为屏幕宽度是不变的,根据这个高度设置swiper容器的高度,再给每张图片加上mode='widthFix'属性,这样图片就会自适应显示,不会变形.
但是缺点是我获取到的图片宽高是通过微信小程序API wx.getImageInfo,这个接口是要先把图片下载下来,所以要求图片是https，还要小程序后台绑定对应downLoad域名,测试在工具上勾选不验证域名查看效果,还有图片大会稍微有点慢,不知道有没有其他人有不同实现方法.
效果图
两张图片高度不一样
实现过程
1.组件
Component({
/**
* 组件的属性列表
*/
properties: {
listimg: {//传进来的图片数组
type: null
},
},
/**
* 组件的初始数据
*/
data: {
configimg: [],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
swiperCurrent: 0
},
ready: function() {
this.initData();
},
/**
* 组件的方法列表
*/
methods: {
//格式化数组
initData: function() {
if (!this.data.listimg && this.data.listimg.length == 0){
console.log("没有图片")
return;
}
let list = this.data.listimg;
let newList = [];
for (let i = 0; i < list.length; i++) {
let h = {};
h.showImg = list[i];
newList.push(h);
}
this.getDownLoadimg(newList);
},
//获取图片真实宽高
getDownLoadimg: function(list) {
let that = this;
let f = 0;
for (let h = 0; h < list.length; h++) {
wx.getImageInfo({
src: list[h].showImg,
success: function(res) {
list[h].width = res.width;
list[h].height = res.height;
},
fail: function(err) {
console.log("错误")
console.log(err)
},
complete: function(res) {
f++
if (f == list.length) {
console.log('执行完毕');
that.getImgMax(list)
} else {
console.log("继续");
}
}
})
}
},
//计算高度比求最大高度值
getImgMax: function(list) {
let heightArr = [];
for (let g = 0; g < list.length; g++) {
//获取图片真实宽度
var imgwidth = list[g].width,
imgheight = list[g].height,
//宽高比
ratio = imgwidth / imgheight;
//计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight
heightArr.push(imgheight)
list[g].imgheight = imgheight;
}
for (let t = 0; t < list.length; t++) {
var maxN = this.checkMax(heightArr)
list[t].maxHeight = maxN;
}
console.log(list)
this.setData({
configimg: list
})
},
//判断最大值
checkMax: function(heightArr) {
let maxN = Math.max.apply(null, heightArr);
return maxN;
},
}
})
