Carousel 初始高度为 0

[JoeeeeeWu]

Environment(required) | 环境（必填）

• antd-mobile version（antd-mobile版本）:"antd-mobile": "^1.0.3",
• Browser (or mark react-native) and its version（浏览器或react-native版本）:Google Chrome版本 56.0.2924.87 (64-bit)
• Operating environment (e.g. OS name) and its version（操作系统版本或设备型号）:win10

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

引入了antd-mobile的Carousel组件
代码如下：

class Home extends Component {
    render() {
        const {
            carousels: {
                value = []
            } = {}
        } = this.props;
        
        return (
            <div>
                <Carousel className="my-carousel" autoplay={false} infinite>
                    {
                        value.map((item,index) => (
                            <img key={index} src={item}></img>
                        ))
                    }
                </Carousel>
            </div>
        );
    }
}

carousels是在Home组件的父组件中通过异步请求获得，然后通过props传到Home组件中的。carousels中的value是一个数组，包含了图片的url。

现在的话图片加载出来就是Carousel组件的默认高度，只有100px。然后如果自动轮播或者滑动的话图片的高度才会出来。

What do you expected?（预期的正常效果）

我就没有截图，但是有人遇到跟我一样的情况

What happen?（发生了何种非正常现象）

就是如果map前面的value如果是直接写死在里面，像官网的domo那样，就是没问题的，就是如果是从服务器拿图片数据回来再渲染，一开始图片是空的，才造成会这样好像

截图反映的情况跟我遇到的是一样的

Re-producible online demo (可复现的在线demo)

暂无

[paranoidjk]

duplicated with #1001

[paranoidjk]

@xiaozhouwu 设置这个 https://github.com/FormidableLabs/nuka-carousel#initialslideheight

关联 FormidableLabs/nuka-carousel#103

[pingan1927]

https://github.com/FormidableLabs/nuka-carousel/blob/master/src/carousel.js#L71

这些参数应该是可以传入的

例如<Carousel initialSlideWidth={this.clientWidth}>{pagesArr}</Carousel>

[paranoidjk]

@pingan1927
试了initialHeight没作用，大概是有bug

[warmhug]

关联 #743 #690 #673 #384 #302

initialSlideHeight 从字面意义上表现是正确的，因为走马灯里图片有个加载前后状态、高度马上就会跟 initialSlideHeight 设置的不同。(我更新下 demo ，把这个现象体现出来)

• 每个项目的高度如果会随着不同状态而变化（例如 img 加载前中后状态）
  • 项目的高度变化后，需要通过设置新的 props (即触发组件的componentWillReceiveProps方法) 或触发 window resize 事件能够改变高度，最终的高度大小由你传入的“每个项目自身的高度”大小确定。
  • 因此底层依赖提供的initialSlideHeight实际用处不大，只是设置了最开始的高度值，但马上在componentDidMount生命周期里去取“每个项目的高度”来做修改，随后也会因为 img 的加载成功或失败而再次修改。(少数情况、如果componentDidMount比较晚才执行，initialSlideHeight才算有用)
• 每个项目的高度各不相同，默认使用最大高度（fixedHeight属性可控制使用可变高度、暂不支持设置）

[paranoidjk]

@warmhug 文档也更新特意说明下吧，已经存在这么多相关issue的问题，不应该一直被问下去

[pingan1927]

上次Grid遇到的是宽度初始化有问题... 断点进去看，发现Carousel很多props需要处理设置，文档比较欠缺。

[zzh3319]

这个问题解决了吗？？？

[tank537285]

a 标签记得设置个display：block

[AmethystCat]

@tank537285
It works! Thank you

[JanusJia]

为什么a标签有href属性，却跳转不了，官方例子也是有链接跳转不了，无语了

[deyongteng]

Environment(required) | 环境（必填）

• antd-mobile version（antd-mobile版本）:"antd-mobile": "^1.0.3",
• Browser (or mark react-native) and its version（浏览器或react-native版本）:Google Chrome版本 56.0.2924.87 (64-bit)
• Operating environment (e.g. OS name) and its version（操作系统版本或设备型号）:win10

What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）

引入了antd-mobile的Carousel组件
代码如下：

class Home extends Component {
    render() {
        const {
            carousels: {
                value = []
            } = {}
        } = this.props;
        
        return (
            <div>
                <Carousel className="my-carousel" autoplay={false} infinite>
                    {
                        value.map((item,index) => (
                            <img key={index} src={item}></img>
                        ))
                    }
                </Carousel>
            </div>
        );
    }
}

carousels是在Home组件的父组件中通过异步请求获得，然后通过props传到Home组件中的。carousels中的value是一个数组，包含了图片的url。

现在的话图片加载出来就是Carousel组件的默认高度，只有100px。然后如果自动轮播或者滑动的话图片的高度才会出来。

What do you expected?（预期的正常效果）

我就没有截图，但是有人遇到跟我一样的情况

What happen?（发生了何种非正常现象）

就是如果map前面的value如果是直接写死在里面，像官网的domo那样，就是没问题的，就是如果是从服务器拿图片数据回来再渲染，一开始图片是空的，才造成会这样好像

截图反映的情况跟我遇到的是一样的

Re-producible online demo (可复现的在线demo)

暂无
可以先初始化你的img, 存储到一个变量里， 然后再执行轮播组件，把变量插入到轮播里；
如：
const imgHtml = imgArr.map((itme, index) => {
return

});
return
<Carousel
autoplay={true}
infinite={true}
dotActiveStyle={{ background: '#1bc883' }}
>{imgHtml}

[meluyue]

图片资源是从服务器请求后赋值，使用Carousel渲染页面时.slider-list height:100px。解决方式：设置图片资源的默认值，在服务器请求成功后进行替换。

[clairelss]

关联 #743 #690 #673 #384 #302

initialSlideHeight 从字面意义上表现是正确的，因为走马灯里图片有个加载前后状态、高度马上就会跟 initialSlideHeight 设置的不同。(我更新下 demo ，把这个现象体现出来)

• 每个项目的高度如果会随着不同状态而变化（例如 img 加载前中后状态）

  • 项目的高度变化后，需要通过设置新的 props (即触发组件的componentWillReceiveProps方法) 或触发 window resize 事件能够改变高度，最终的高度大小由你传入的“每个项目自身的高度”大小确定。
  • 因此底层依赖提供的initialSlideHeight实际用处不大，只是设置了最开始的高度值，但马上在componentDidMount生命周期里去取“每个项目的高度”来做修改，随后也会因为 img 的加载成功或失败而再次修改。(少数情况、如果componentDidMount比较晚才执行，initialSlideHeight才算有用)

• 每个项目的高度各不相同，默认使用最大高度（fixedHeight属性可控制使用可变高度、暂不支持设置）

fixedHeight 并没有起到作用 不可以变高

[inoutw]

I find when the data is fetched from remote server, the height is initialed as 100. So I render the children list when data done fetched while render as null when undefined. now it worked.
if (!bannerList) { return null } return <Carousel>{ bannerList.map(()=>{ ... }) }</Carousel>

[Allen6699]

轮播图中 加载异步数据后 好像有高度丢失 切换路由后不能正常切换的问题
原因分析：可能是轮播图数据初始状态是[]空数据，加载数据又是个异步的，导致加载后数据不一致

解决办法
1.在state初始数据中 添加一个表示轮播图加载完成后的状态 isSwiperLoaded: false
2. 在 轮播图 数据加载完成后，修改该数据状态值为 isSwiperLoaded: true
3. 只有在轮播图数据加载完成的情况下，才渲染 轮播图组件 (提示：可以在轮播图数据还没渲染出来前，加一个骨架屏占位
div,防止页面抖动)

希望能帮到遇到同样问题的小伙伴

[Allen6699]

state = {
swipers: [], // 轮播图的初始值
isSwiperLoaded: false, // 轮播图数据加载完后的状态值
};

componentDidMount() {
// 调用请求方法获取数据...
// this.getSwipers();
this.setState({
swipers: res.data,
isSwiperLoaded: true
});
}

render() {
return (
{/* 轮播图 /}

{this.state.isSwiperLoaded ? (

{/ 渲染的每一项的结构内容 */}
{this.renderSwipers()}

) : (
""
)}

);
}
}