好客租房114-轮播图的功能

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 => (
                <a
                  key={val}
                  href="http://www.alipay.com"
                  style={{ display: 'inline-block', width: 
'100%', height: this.state.imgHeight }}
                >
                  <img
                    src={`https://zos.alipayobjects.com/rmsportal/
${val}.png`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </a>
              ))}
            </Carousel>
          </div>
        );
      }
}

export default Index

运行结果

 只贴出部分代码 微信公众号关注前端小歌谣一起学习