微信小程序swiper组件设置自适应图片高度展示,并且为了用户设置一组高度不一致的图片的时候不会产生跳动感,设置外层盒子高度为一组图片中最高的图片高度为盒子高度
html代码:
【wepy|wepy微信小程序swiper组件设置自适应图片高度,图片高度不一致取最高图片的高度】js代码:
data = https://www.it610.com/article/{
indicatorDots: true, // 开启小圆点
autoplay: true, // 开启自动轮播
interval: 2000, // 轮播间隔
duration: 1000, // 动画时长
swiperCurrent: 0,
// 所有图片的高度
imgheights: [],
// 图片宽度
imgwidth: 750,
// 默认
current: 0,
imgBoxSize: 0
};
swiperChange(e) {
this.swiperCurrent = e.detail.current
this.current = e.detail.current
this.$apply()
},
imageLoad(e) {
this.imgheights = []
// 获取图片真实宽度
var imgwidth = e.detail.width
var imgheight = e.detail.height
// 宽高比
var ratio = imgwidth / imgheight
console.log(imgwidth, imgheight)
// 计算的高度值
var viewHeight = 750 / ratio
imgheight = viewHeight
// 把每一张图片的高度记录到数组里
this.imgheights.push(imgheight)
// 取出图片数组中最高的一个值
this.imgBoxSize = Math.max.apply(null, this.imgheights)
this.$apply()
}
这里用的wepy框架编写的跟原生稍有不同,大致一样
推荐阅读
- 微信小程序地址位置定位wx.getLocation 4G 与WIFI 不一致
- C#|微信小程序开发系列(六)——“处理请求时出错”怎么处理()
- 微信小程序|微信小程序从入门到入土教程(02)
- 微信小程序开发项目实战(五)
- 微信小程序前端请求云函数显示超时错误
- 解决实际问题|小程序部署环境问题
- 小程序之云开发初体验
- 微信小程序中获取时间戳IOS不兼容
- 如何实现微信小程序wx.setStorage数据缓存实现缓存过期时间