Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

rax-slider

2.3.9 • Public • Published

npm

纯 Web 场景推荐使用 rax-swiper

描述

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

安装

$ npm install rax-slider --save

属性

注:

  1. 支持列表中的 browser代表 Web weex代表 Weex miniApp代表支付宝小程序, wechatMiniprogram 代表微信小程序bytedanceMicroApp 代表头条小程序quickApp代表快应用
  2. Web 环境中 slider 内部默认做了节点的懒加载渲染,不再需要使用 picture 的lazyload做懒加载
  3. paginationStyleitemColor 用来定义分页原点的颜色,itemSelectedColor 用来定义分页原点激活时的颜色,itemSize用来定义分页圆点的大小,小程序只支持设置 itemColor 用来定义分页原点的颜色,itemSelectedColor。快应用只支持itemColoritemSelectedColoritemSize三个用来定义分页圆点的样式。默认样式如下:
{
  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 的宽度 browser weex miniApp wechatMiniprogrambytedanceMicroAppquickApp
height string - Slider 的高度 browser weex miniApp wechatMiniprogrambytedanceMicroAppquickApp
autoPlay boolean false 是否自动播放 browser weex miniApp wechatMiniprogrambytedanceMicroAppquickApp
showsPagination boolean true 是否显示指示点 browser weex miniApp wechatMiniprogrambytedanceMicroApp
paginationStyle object - 自己定义指示点的样式,否则默认样式居中 browser weex miniApp wechatMiniprogrambytedanceMicroApp
loop boolean true 是否是循环播放 browser weex miniApp wechatMiniprogrambytedanceMicroApp quickApp
index number 0 指定默认初始化第几页 browser weex miniApp wechatMiniprogrambytedanceMicroApp
autoPlayInterval number 3000 自动播放的间隔时间 browser weex miniApp wechatMiniprogrambytedanceMicroApp
onChange function - index 改变时会触发 browser weex miniApp wechatMiniprogrambytedanceMicroApp quickApp
direction string horizontal Slider 滚动方向 (horizontal / vertical) miniApp wechatMiniprogrambytedanceMicroApp quickApp

方法

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 });

Install

npm i rax-slider

DownloadsWeekly Downloads

191

Version

2.3.9

License

BSD-3-Clause

Unpacked Size

187 kB

Total Files

106

Last publish

Collaborators

  • avatar