yacheng/rax-slider

支持

Web / Weex / 小程序

描述： 轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。

安装

$ npm install rax-slider --save

属性

注：

1. 支持列表中的 代表h5 代表weex 代表小程序
2. web 环境中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的 lazyload做懒加载
3. paginationStyle 默认样式如下，其中 itemColor 用来定义分页原点的颜色，itemSelectedColor 用来定义分页原点激活时的颜色，itemSize 用来定义分页圆点的大小

{
  position: 'absolute',
  width: props.width,
  height: '40rem',
  bottom: '20rem',
  left: 0,
  itemColor: 'rgba(255, 255, 255, 0.5)',
  itemSelectedColor: 'rgb(255, 80, 0)',
  itemSize: '8rem'
}

属性	类型	默认值	必填	描述	支持
width	String	-	是	Slider的宽度
height	String	-	是	Slider的高度
autoPlay	Boolean	false	否	是否自动播放
showsPagination	Boolean	true	否	是否显示指示点
paginationStyle	Object	null	否	自己定义指示点的样式，否则默认样式居中
loop	Boolean	true	否	是否是循环播放
index	Number	0	否	指定默认初始化第几页
autoPlayInterval	Number	3000	否	自动播放的间隔时间
onChange	function	-	否	index 改变时会触发

方法

Slider.slideTo(index: number)

参数

属性	类型	默认值	必填	描述
index	number	-	是	滚动到指定页面

示例

在线 Demo

import { createElement, Component, render, createRef } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Slider from '../src/index';
import DU from 'driver-universal';

let styles = {
  slider: {
    width: 750,
    position: 'relative',
    overflow: 'hidden',
    height: 500,
    backgroundColor: '#cccccc'
  },
  itemWrap: {
    width: 750,
    height: 500
  },
  image: {
    width: 750,
    height: 500
  },
  button: {
    marginTop: 20,
    width: 340,
    height: 80
  },
  paginationStyle: {
    position: 'absolute',
    width: 750,
    height: 40,
    bottom: 20,
    left: 0,
    itemColor: 'rgba(255, 255, 255, 0.5)',
    itemSelectedColor: 'rgb(255, 80, 0)',
    itemSize: 16
  }
};

class App extends Component {

  constructor(props) {
    super(props);

    this.inputRef = createRef();
  }

  onchange = (index) => {
    console.log('change', index);
  }

  onClick = () => {
    this.inputRef.current.slideTo(0);
  }

  render() {
    return (
      <View>
        <Slider className="slider" width="750" height="500" style={styles.slider}
                autoPlay={true}
                loop={true}
                showsPagination={true}
                paginationStyle={styles.paginationStyle}
                autoplayTimeout={3000}
                onChange={this.onchange}
                ref={this.inputRef}>
          <View style={styles.itemWrap}>
            <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} />
          </View>
          <View style={styles.itemWrap}>
            <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} />
          </View>
          <View style={styles.itemWrap}>
            <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} />
          </View>
        </Slider>

        <View onClick={this.onClick}>Click</View>
      </View>
    );
  }
}

render(<App />, document.body, { driver: DU });