rax-slider

Web 场景推荐使用 rax-swiper

rax-slider 由于历史原因，可能存在一些问题，非内联样式场景强烈推荐使用 rax-swiper！

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

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

安装

$ npm install rax-slider --save

属性

1. Web 环境中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的lazyload做懒加载
2. paginationStyle中itemColor 用来定义分页原点的颜色，itemSelectedColor 用来定义分页原点激活时的颜色，itemSize用来定义分页圆点的大小，小程序只支持设置 itemColor 用来定义分页原点的颜色，itemSelectedColor。快应用只支持itemColor、itemSelectedColor、itemSize三个用来定义分页圆点的样式。默认样式如下：

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

| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 | | ---------------- | ---------- | ---------- | -------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | width | string | - | 是 | Slider 的宽度 | | | height | string | - | 是 | Slider 的高度 | | | autoPlay | boolean | false | 否 | 是否自动播放 | | | showsPagination | boolean | true | 否 | 是否显示指示点 | | | paginationStyle | object | - | 否 | 自己定义指示点的样式，否则默认样式居中 | | | loop | boolean | true | 否 | 是否是循环播放 | | | index | number | 0 | 否 | 指定默认初始化第几页 | | | autoPlayInterval | number | 3000 | 否 | 自动播放的间隔时间 | | | onChange | function | - | 否 | index 改变时会触发 | | | direction | string | horizontal | 否 | Slider 滚动方向 (horizontal / vertical) | |

方法

Slider.slideTo(index: number)

参数

| 属性 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | ---------- | -------- | --------------------- | | index | number | - | 是 | 滚动到指定索引的 View |

Slider.Item

每一个需要被轮播的子元素需要被包裹在 Slider.Item 组件中，在 Weex 和 Web 该组件是 Fragment 空节点，在小程序该组件是 swiper-item。由于该节点没有实际意义，所以不要在该组件上设置样式和绑定事件。 如果只在 Web 和 Weex 中使用，每一个需要轮播的子项无需包裹 Slider.Item 组件。

示例

import { createElement, Component, render, createRef } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Slider from 'rax-slider';
import DriverUniversal from 'driver-universal';

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}
        >
          <Slider.Item>
            <View style={styles.itemWrap}>
              <Image
                style={styles.image}
                source={{
                  height: 500,
                  width: 375,
                  uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png',
                }}
              />
            </View>
          </Slider.Item>
          <Slider.Item>
            <View style={styles.itemWrap}>
              <Image
                style={styles.image}
                source={{
                  height: 500,
                  width: 375,
                  uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png',
                }}
              />
            </View>
          </Slider.Item>
          <Slider.Item>
            <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.Item>
        </Slider>

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

const 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,
  },
};

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