rat-slider

组件介绍

轮播图组件

demo

import Slider from 'rat-slider';
import View from 'rat-view';
import Picture from 'rat-picture';

const slides = [
    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' },
];

const itemNodes = slides.map((item, index) => <View key={index} style={{width'100%', height,}}><Picture source={{uri:item.url}} alt={item.text} /></View>);

render(<Slider>{itemNodes}</Slider>, mountNode);

api

参数 | 说明 | 类型 | 默认值 | 是否必填 ----- | ----- | ------ | ------ |------ | dots | 是否显示导航锚点 | Boolean | true | dotsStyle | 统一修改导航锚点样式 | Object | {} | autoplay | 是否自动轮播 | Boolean | false | autoplaySpeed | 动效类型，支持'slide'和'fade' | String | 'slide' | animation | 轮播间隔时间 | number | 3000 | speed | 轮播速度 | number | 500 | arrows | 是否显示箭头 | Boolean | true | preArrowStyle | 箭头样式修改 | object | {} | nextArrowStyle | 箭头样式修改 | object | {} | dotRender | 自定义导航锚点 dotsRender={(index, current) => {return {index};}}> | Function | | triggerType | 锚点导航触发方式 可选值: 'click', 'hover' | Enum | 'click' | onChange | 轮播切换的回调函数 签名:Function(index: Number) => void 参数:index: {Number} 幻灯片的索引 | Function | |