Slider

描述

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

安装

$ npm install rax-slider --save

属性

属性	类型	默认值	必填	描述	支持
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 改变时会触发
direaction	string	horizontal	否	Slider 滚动方向 (horizontal / vertical)

注：

• 基础属性、事件及图片含义见组件概述。

• Web 容器中 slider 内部默认做了节点的懒加载渲染，不再需要使用 picture 的 lazyload 做懒加载。

• paginationStyle中itemColor 用来定义分页原点的颜色，itemSelectedColor 用来定义分页原点激活时的颜色，itemSize用来定义分页圆点的大小，小程序只支持设置 itemColor 用来定义分页原点的颜色，默认样式如下：

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

方法

Slider.slideTo(index: number)

滚动到指定页面。

参数

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';

const App  = () => {
  const handleChange = (idx) {
    console.log('change to ', idx);
  }

  return (
    <View>
      <Slider
        className="slider"
        width="750"
        height="500"
		autoPlay
        onChange={handleChange}
      >
        <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>
  );
}

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

滚动到指定页面

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

import DescHeader from '../../components/DescHeader';

const App = () => {
  const sliderRef = useRef(null);

  function slideTo(index) {
    sliderRef.current.slideTo(index);
  }

  return (
    <View>
      <View>
        <Slider width="680" height="500"
          ref={sliderRef}
        >
          <View>
            <Image source={{ height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png' }} />
          </View>
          <View>
            <Image source={{ height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png' }} />
          </View>
          <View>
            <Image source={{ height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png' }} />
          </View>
        </Slider>
      </View>
      <View onClick={() => slideTo(0)}>
        <Text>Slide To First</Text>
      </View>
    </View>
  );
}

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