1打开ant-moblie组件库的carousel
2选择基本 点击显示远吗
3开始拷贝代码
import React from "react"; //留白 import { Carousel } from 'antd-mobile'; class Index extends React.Component{ state = { data: ['1', '2', '3'], imgHeight: 176, } componentDidMount() { // simulate img loading setTimeout(() => { this.setState({ data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'], }); }, 100); } render() { return ( //留白 WingBlank <div className="index"> <Carousel //自动播放 autoplay={false} infinite // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)} // afterChange={index => console.log('slide to', index)} > {this.state.data.map(val => ( key={val} href="http://www.alipay.com" style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }} > src={`https://zos.alipayobjects.com/rmsportal/ ${val}.png`} alt='好客租房114-轮播图的功能_ide' style={{ width: '100%', verticalAlign: 'top' }} onLoad={() => { // fire window resize event to change height window.dispatchEvent(new Event('resize')); this.setState({ imgHeight: 'auto' }); }} /> ))} ); } } export default Index
运行结果