2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

antd-mobile carousel初始高度问题

antd-mobilejavascript作者:猿2048志愿者

问题描述

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>
    );
}

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

焦点图刚刚加载后

评论
点击刷新
评论
相关问题
×添加代码片段