微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就会被隐藏。那么如何让图片自适应不同分辨率是一个很重要的问题。
一种思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下 swiper 的高度。
1、wxml 结构
<swiper autoplay circular indicator-dots style="height: {
{
swiperHeight}};">
<swiper-item wx:for="{
{swiperData}}" wx:key="id">
// 注意设置 mode="widthFix" 和 style="width: 100%;"
<image mode="widthFix" src="{
{item.image_src}}" style="width: 100%;" bindload="computeImgHeight"></image>
</swiper-item>
</swiper>
2、js 文件
Page({
data: {
swiperHeight: "", // swiper的高度
},
computeImgHeight(e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
var imgh=e.detail.height; //图片高度
var imgw=e.detail.width;
var swiperH = winWid * imgh / imgw + "px" //等比设置swiper的高度。
//即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 --> swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
this.setData({
swiperHeight: swiperH //设置swiper高度
})
}
})