Carousel.CarouselItem 3.0.8

Carousel组件内部的Item组件，和普通的dom节点相比增加了懒加载图片功能。也可以使用onTap给Item绑定tap事件回调。

你可以通过Carousel.CarouselItem来使用这个组件，或者引用yo3/component/carousel/src/carouselItem的js模块来使用。

注意：CarouselItem不能和Touchable一起使用，请使用它的onTap属性来绑定事件回调。

属性

img { String } #

图片地址。

errorImg { String } #

图片加载失败时的替换图片。

checkImgFun { Function } #

目标图片onload时触发进行判断的函数。

方法参数:

参数名 类型 描述 支持版本
图片实例

onTap { Function } #

item点击事件处理函数。

方法参数:

参数名 类型 描述 支持版本
事件对象，传入组件数据 e

renderContent { Function } 3.0.7 #

当所需要的渲染内容不仅仅是一张图片的时候，通过此方法渲染内容，该方法的参数是经过懒加载判断的图片节点。 示例 

  • dataList.map((item, index)=>{
   return (<CarouselItem
       key={index + 1}
       {...item}
       renderContent={(img) => (
           <div className="unit">
               {img}
               <span>这是第{index}张图片</span>
           </div>
       )}
   ></CarouselItem>);
};

方法参数:

参数名 类型 描述 支持版本
图片实例

extraClass { String } #

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

loadingEle { Element } #

图片加载时的loading Element。

lazyload { Bool } #

是否需要图片懒加载。默认值为true,当前图片的前后两个节点图片被加载。

activeClass { String } #

item是当前展示item的样式名，默认值为'on'。