antd-mobile carousel初始高度问题

Question

问题描述

antd-mobile carousel 组件初始化的时候高度很小，只有等切换到第二张图时，才能显示正常。该怎么处理呢？

问题出现的环境背景及自己尝试过哪些方法

1. 我在 a 元素用类名设置样式，给一个固定的高度是不存在这个问题的。但是既然是移动端开发，设备宽度不确定，焦点图应该是可以自适应的，所以它的高度也不能写死。
2. 我用 ref 获取到这些 a 元素，在 componentDidMount 里给它们设置高度。如果写成固定的值，在F12里可以看到高度设置成功了，但是问题依然存在。如果是通过图片宽高比和焦点图的宽度计算出来的高度，设置无效。
3. 给 carousel 设置 frameOverflow="visible"，加载后能够看到完整的第一张图，但是此时屏幕可以向右滑动，看到所有焦点图……
4. 组件里写了一个 setHeight 方法，在 a 元素的内联样式里调用，不起作用……

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

render() {
    let html = this.props.bannerData.map((obj, index) => {
        return (
            <a href={obj.extra.tourl} key={obj.id} className="carousel-link">
                <img src={obj.imgurl} alt={obj.title} />
            </a>
        );
    });
    
    return (
        <WingBlank size="sm">
            <Carousel
                autoplay={true}
                infinite
                ref={this.carou}
            >{html}</Carousel>
        </WingBlank>
    );
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

我今天也遇到这个问题，一开始搜到这里来，看了上面两个回答不靠谱。
自己尝试了几个小时都没解决，后来仔细看官方示例，才发现问题。

需要在img标签里监听onLoad，当图片加载后触发resize事件给Carousel组件，组件再根据加载后图片的实际宽高来设定ul的高度。

坑的地方主要是自己看示例没注意细节，当然也和示例里的注释是英文有关，“fire window resize event to change height”，看的时候没注意英文提示。

Answer 2

<img src={image} onLoad={() => {window.dispatchEvent(new Event('resize'));}} />
出处

Answer 3

我对 Carousel 里的 ul 设置了高度，至于设置一个定时器，是因为组件会把 ul 的高度设置为16px，不开定时器的话自己写的高度值无效。
不过自己算出来的高度和组件算的有一点儿出入，自动切换到第二张图的时候，高度会有一点儿变化，不过总比载入时看不到完整图片要好。暂时没有找到更好的解决办法，还请各位高手指教。

componentDidMount(){
    let carousel = document.querySelector('.slider.am-carousel');
    let carouH = carousel.clientWidth/360*137;
    let carouUl = carousel.querySelector('ul.slider-list');

    setTimeout(() => {
        carouUl.style.height = `${carouH}px`;
    });
}

componentWillUnmount(){
    this.setState = (state,callback)=>{
        return;
    };
}

Answer 4

这个需要给a标签设置成块级元素并设置高度：具体如下

class app extends Component {
    state = {
        imgHeight: "4.02rem",
    }
    render() {
        return (
            <div>
                <NavBar className='sticky-header'>Home</NavBar>
                <div className='EOSContract'>
                    <WingBlank>
                        <Carousel
                            autoplay={true}
                            infinite>
                            <a style={{ display: 'inline-block',height: this.state.imgHeight}}>
                                <img
                                    src={img0}
                                    style={{ width: '100%' }}

                                />
                            </a>
                        </Carousel>
                    </WingBlank>
                </div>
            </div>

        )
    }
}

Answer 5

 componentDidMount() {
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 0);
  },