Carousel 走马灯

定义／Definition

将图形化的对象组成列表放入到一个水平放置的带状或弓形区域中，并允许用户向前或向后滚动走马灯来查看他们。

规则 / Rule

  • 所展示信息属于同一个层级。

  • 当没有足够的空间来放置缩略图网格的时候使用。

  • 这一模式可以鼓励用户浏览和探索。

  • 分区的模块的内容有关或相仿。

代码演示

基本

最简单的用法。 

  1. import { Carousel } from 'antd-mobile';
  3. function onChange(a, b, c) {
  4.   console.log(a, b, c);
  5. }
  7. ReactDOM.render(
  8.   <Carousel afterChange={onChange}>
  9.     <div><h3>Pic1</h3></div>
  10.     <div><h3>Pic2</h3></div>
  11.     <div><h3>Pic3</h3></div>
  12.     <div><h3>Pic4</h3></div>
  13.     <div><h3>Pic5</h3></div>
  14.   </Carousel>
  15. , mountNode);

顶部模式

最简单的用法。 

  1. import { Carousel } from 'antd-mobile';
  3. function onChange(a, b, c) {
  4.   console.log(a, b, c);
  5. }
  7. ReactDOM.render(
  8.   <Carousel afterChange={onChange} mode="banner">
  9.     <div><h3>Pic1</h3></div>
  10.     <div><h3>Pic2</h3></div>
  11.     <div><h3>Pic3</h3></div>
  12.     <div><h3>Pic4</h3></div>
  13.   </Carousel>
  14. , mountNode);

Carousel走马灯 - 图1

API

参数说明类型默认值
mode展示模式，可取banner，card，提供定制化的顶部banner型和卡片型两种样式String无
effect动画效果函数，可取 scrollx, fadeStringscrollx
dots是否显示面板指示点Booleantrue
vertical垂直显示Booleanfalse
autoplay是否自动切换Booleanfalse
easing动画效果Stringlinear
beforeChange切换面板的回调function(from, to)无
afterChange切换面板的回调function(current)无
更多参数可参考：https://github.com/akiran/react-slick