Swiper控件无法根据内容自动调整高度。因此需要动态计算高度,取所有Slide中高度最大的一页,赋值给Swiper对象。
以Taro框架(React)为例:
onUpdateSwiperImage (e) {
setTimeout(() => {
const query = Taro.createSelectorQuery()
query
.select('.swiper-img')
.boundingClientRect()
.exec((rectArr) => {
if (rectArr.length == 0) return;
let maxHeight = rectArr[0].height;
rectArr.forEach((rect) => {
if (rect.height > maxHeight) {
maxHeight = rect.height
}
})
this.setState({ swiperHeight: maxHeight })
})
}, 200);
}
<View className="swipper-wrapper">
<View className="swipper-inner">
<Swiper
autoplay
indicatorDots
className="swiper"
style={{ height: this.state.swiperHeight + 'px' }}
>
{views}
</Swiper>
</View>
</View>
https://wwd.com
Fantastic website you have here but I was curious if you
knew of any community forums that cover the same topics discussed
in this article? I’d really love to be a part of online community where I can get opinions from other experienced individuals that share
the same interest. If you have any suggestions, please let me know.
Bless you!