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>