Carousel 走马灯

规则

• 所展示信息属于同一个层级；同时，鼓励用户进行内容的浏览和探索。

• 一般情况下，只进行横向滚动。

• 默认自动轮播，当用户轻触时该区域时停止；允许用户向前、向后滚动 Carousel。

代码演示

走马灯

import { Carousel, Flex } from 'antd-mobile';
import classNames from 'classnames';
const data = [
  {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  }, {
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: '文字',
    link: 'hehe',
  },
];
const CarouselExample = React.createClass({
  componentWillMount() {
    this.clientWidth = document.documentElement.clientWidth;
  },
  render() {
    const dataLength = data.length;
    const FlexCount = Math.ceil(dataLength / 4);
    const gridContent = [];
    const carouselContent = [];
    const prefixCls = 'am-grid';
    const itemCls = classNames({
      [`${prefixCls}-item`]: true,
    });
    const flexItemStyle = {
      height: `${this.clientWidth / 4}px`,
      paddingTop: `${this.clientWidth / 16}px`,
    };
    for (let i = 0; i < FlexCount; i++) {
      const flexContent = [];
      for (let j = 0; j < 4; j++) {
        if ((i * 4) + j < dataLength) {
          flexContent.push(<Flex.Item
            className={itemCls}
            style={flexItemStyle}
            onClick={() => { this.props.onClick(data[(i * 4) + j], ((i * 4) + j)); }}
            key={`griditem-${(i * 4) + j}`}
          >
            <div className={`${prefixCls}-icon`} style={{ backgroundImage: `url(${data[(i * 4) + j].icon})` }} />
            <div className={`${prefixCls}-text`}>{data[(i * 4) + j].text}</div>
          </Flex.Item>);
        } else {
          flexContent.push(<Flex.Item style={flexItemStyle} key={`griditem-${(i * 4) + j}`} />);
        }
      }
      gridContent.push(<Flex key={`fridflex${i}`}>{flexContent}</Flex>);
    }
    const gridContentLength = gridContent.length;
    for (let k = 0, len = Math.ceil(gridContentLength / 2); k < len; k++) {
      if (k * 2 < gridContentLength) {
        carouselContent.push();
      }
      if ((k * 2) + 1 < gridContentLength) {
        carouselContent.push(<div
          key={`carouselitem-${(k * 2) + 1}`}
        >
          {gridContent[k * 2]}
          {gridContent[(k * 2) + 1]}
        </div>);
      } else {
        carouselContent.push(<div
          key={`carouselitem-${k * 2}`}
        >
          {gridContent[k * 2]}
          <Flex>
            <Flex.Item className={itemCls} style={flexItemStyle} />
            <Flex.Item className={itemCls} style={flexItemStyle} />
            <Flex.Item className={itemCls} style={flexItemStyle} />
            <Flex.Item className={itemCls} style={flexItemStyle} />
          </Flex>
        </div>);
      }
    }
    return (
      <Carousel>
        {carouselContent}
      </Carousel>
    );
  },
});
ReactDOM.render(<CarouselExample onClick={() => {}} />, mountNode);

图片切换

import { WhiteSpace, WingBlank, Flex, Carousel } from 'antd-mobile';
const App = React.createClass({
  getInitialState() {
    return {
      current: 2,
    };
  },
  beforeSlide(from, to) {
    console.log(`slide from ${from} to ${to}`);
  },
  slideTo(index) {
    console.log('slide to', index);
  },
  render() {
    const settings = {
      dots: true,
      autoplay: true,
      infinite: true,
      selectedIndex: this.state.current,
      beforeChange: this.beforeSlide,
      afterChange: this.slideTo,
    };
    return (
      <div>
        <div className="pagination-container" >
          <WhiteSpace size="lg" />
          <WingBlank>
            <Carousel {...settings}>
              <Flex
                justify="center"
                className="flex-container-justify"
              >
                <h3>Carousel 1</h3>
              </Flex>
              <Flex
                justify="center"
                className="flex-container-justify"
              >
                <h3>Carousel 2</h3>
              </Flex>
              <Flex
                justify="center"
                className="flex-container-justify"
              >
                <h3>Carousel 3</h3>
              </Flex>
            </Carousel>
          </WingBlank>
          <WhiteSpace size="lg" />
        </div>
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

.loading-example .title {
  margin-right: 0.2rem;
}
.slider {
  background: #fff;
}
.flex-container-justify {
  height: 3.6rem !important;
}
.flex-container-justify h3 {
  font-size: 0.36rem;
  font-weight: 300;
  text-align: center;
}

API