走马灯组件 支持用户自定义动画对象，支持用户自定义css动画 支持用户自定义子节点

默认动画：

  • 横向滚动动画
  • 为当前页加上on的类名，因此可以附加css动画效果。

默认走马灯子节点：

  • 支持图片懒加载
  • 图片加载失败的替换图模板

查看Demo获得实例： 使用自定义动画实现图片查看器 内置动画配合css动画效果

使用注意：

  • Carousel组件的父节点需要有宽度，Carousel组件默认宽度为‘100%’，如果父节点没有宽度会导致默认滚动动画失效。
  • Carousel组件不能直接嵌套在Touchable组件中，请使用CarouselItem的onTap来给它的Item绑定tap事件回调， 或者用Touchable组件包裹Item。
使用说明

引用方式

import { Carousel } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import Carousel from 'yo3/component/carousel';

基础用法

<Carousel>
  <li className="item"><img className="img" src="//img1.qunarzz.com/qs/1610/a6/01d1ad00e4b9e102.jpg" /></li>
  <li className="item"><img className="img" src="//img1.qunarzz.com/qs/1610/a6/01d1ad00e4b9e102.jpg" /></li>
  <li className="item"><img className="img" src="//img1.qunarzz.com/qs/1610/a6/01d1ad00e4b9e102.jpg" /></li>
</Carousel>

使用内置组件CarouselItem

  • 提供图片懒加载功能
  • 配合 CSS 实现当前页切换的动画效果
const testData = [
  {
    img: '//img.alicdn.com/tps/TB13Ha_NXXXXXbCXVXXXXXXXXXX-1125-352.jpg_q50.jpg'
  },{
    img: '//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg'
  },{
    img: '//aecpm.alicdn.com/simba/img/TB10CLcNXXXXXXVXXXXSutbFXXX.jpg_q50.jpg'
  },{
    img: '//gw.alicdn.com/imgextra/i2/5/TB2xuHoaX55V1Bjy0FnXXc5XFXa_!!5-0-yamato.jpg_q50.jpg'
  },{
    img: '//img.alicdn.com/tps/TB1XXrzNXXXXXaXXXXXXXXXXXXX-1125-352.jpg_q50.jpg'
  }
];
class Demo extends Component {
  constructor() {
    super();
    this.state = {
      currentPage: 1,
    };
  }

  render() {
    return (
      <Carousel
        afterChange={(page) => {
          this.setState({
            currentPage: page
          })
        }}
      >
      {
        testData.map((item, index) => (
          <CarouselItem
            key={index + 1}
            {...item}
            lazyload
          />
        ))
      }
      </Carousel>
    )
  }
}

自定义动画

传入 JS 动画对象，使用自定义动画

import aniCss from '~yo/component/carousel/src/aniCss.js';
class Demo extends Component {
  constructor() {
    super();
    this.state = {
      currentPage: 1,
    };
  }

  render(){
    return (
      <Carousel
        aniObj={aniCss}
        extraClass={'yo-carousel-fade'}
        afterChange={(currentPage) => {
          this.setState({ currentPage })
        }}
      >
      {
        testData.map((item, index) => (
          <CarouselItem
            key={index + 1}
            {...item}
            lazyload
            activeClass={'top'}
          />
        ))
      }
      </Carousel>
    )
  }
}

注意 carousel组件需要挂载的父节点有宽度，组件内置动画需要宽度计算位置，组件本身宽度是'100%'，因此请使用者保证父节点宽度。

属性

dots { Bool } #

是否使用默认坐标展示，详细可以查看demo基础用法展示。

默认值: true

autoplay { Bool } #

是否自动换页。

默认值: true

loop { Bool } #

是否循环 循环防范受动画影响，因此循环的具体方案由动画对象提供。

默认值: true

beforeChange { Function } #

页面切换前提供的回调函数，索引值在carousel.children中设置从1开始。

方法参数:

参数名 类型 描述 支持版本
变化后页面索引 num

afterChange { Function } #

页面切换后提供的回调函数，索引值在carousel.children中设置从1开始。

方法参数:

参数名 类型 描述 支持版本
变化后页面索引 num

extraClass { String } #

为组件根节点提供额外的class。

delay { Number } #

自动播放时动画间隔，单位为s，因动画的实现方式而不同。

speed { Number } #

动画播放速度，单位为s,因动画的实现方式而不同。

defaultPage { Number } #

组件渲染时起始页面。

aniSpeed { Number } #

如果使用css动画，该值为动画播放时间，用于在滚动循环时计算动画时机。

aniObj { Object } #

自定义动画对象，自定义动画需要提供以下方法。

  • handleData（aniObj, children）用于组件渲染前对于子节点的处理；
  • touchstart(aniObj) 动画处理的touchstart事件；
  • touchmove(aniObj) 动画处理的touchmove事件；
  • touchend(aniObj) 动画处理的touchend事件；
  • touchcancel(aniObj)动画处理的touchcancel事件；
  • next(aniObj) 下一帧 需返回动画结束后的当前索引；
  • arrive（aniObj,num) 跳转；
  • prev(aniObj) 上一帧 动画结束后的当前索引；

carousel组件提供了两种自定义动画，使用者可以按需引用：

  • aniCss动画使用改变Index层级的方式来展示当前页面。
  • aniInfinate动画用有限的节点数（3个）渲染无限数量节点，其实现类似于list组件infinte模式，相较于默认动画实现减少了dom节点的数量，增加了dom操作的次数，适用于实现图片查看器等dom节点多的场景。

aniObj格式

  • {
  aniSpeed:0,
  containerDOM: ul.cont, //节点
  delay: 1,
  loop: true,
  operationTimer: 5, //操作数动画运动的绝对值，交由动画控制
  pageNow: 5,
  speed: .5,
  stageDOM: div,
  width: 375 //这里需注意宽度在组件mount后才有
  touchstartLocation:e
  touchendLocation:e
  touchmoveLocation:e
}

children { Element } #

carousel的展示内容。

disable { Boolean } 3.0.10 #

禁止动画响应手势操作

currentPage { PropTypes.number } #

子组件通过context获取到currentPage，currentPage表示当前展示的page索引。

pagesNum { PropTypes.number } #

子组件通过context获取到pagesNum，pagesNum表示carousel组件children的数量。

方法

handleResize 3.0.8 #

当元素容器宽度发生变化时调用，用于重设组件内容器 translate 的值

arrive #

到达方法

方法参数:

参数名 类型 描述 必选 支持版本
num number 到达的页数
boolean isAni 是否需要动画

play #

播放动画

pause #

暂停动画

prev #

播放上一页

next #

播放下一页