- 小程序
在微信小程序中，你可以通过调整 Swiper 组件和图片的尺寸来实现轮播图片的自适应高度。
在上面的代码中，首先设置了 Swiper 组件的高度，使用 swiperHeight 动态绑定。在每个 Swiper-Item 中使用 wx:for 遍历图片列表，item 为遍历的每一项。
然后，设置图片的样式，使用 mode="aspectFill" 拉伸图片填满整个容器，并设置 width: 100% 让图片宽度撑满容器。图片的高度使用同样的 swiperHeight 动态绑定。
在对应的 JavaScript 文件中，计算 Swiper 组件的高度：
Page({
data: {
imageList: ['图片地址1', '图片地址2', '图片地址3'],
swiperHeight: 0
},
onLoad: function() {
const that = this;
wx.getSystemInfo({
success: function(res) {
const windowHeight = res.windowHeight; // 获取窗口高度
const statusBarHeight = res.statusBarHeight; // 获取状态栏高度
const navBarHeight = 44; // 假设导航栏的高度为 44px
const query = wx.createSelectorQuery();
query.select('.swiper').boundingClientRect(); // 获取 Swiper 组件的位置信息
query.exec(function(res) {
const swiperHeight = windowHeight - statusBarHeight - navBarHeight - res[0].top; // 计算 Swiper 组件的高度
that.setData({
swiperHeight: swiperHeight
});
});
}
});
}
});在上面的代码中，使用 wx.getSystemInfo 获取系统信息，其中获取窗口高度、状态栏高度和假设导航栏高度。
然后，使用 wx.createSelectorQuery 获取 Swiper 组件 .swiper 的位置信息，通过计算得到 Swiper 组件的高度，并将其设置到 swiperHeight 数据变量中。
这样，当页面加载时，通过计算得到 Swiper 组件的高度，并将其应用到 Swiper 组件以及图片上。图片将自适应调整高度，使其在轮播时合理显示。
