一、描述

rax-slider 是 rax 内置的轮播组件,不仅支持纯图片的轮播,还支持自定义的 view 内容的轮播

官方文档地址:

支持的 props 如下,详细内容请参照官方文档,不再重复。

同样的,weex 环境和 web 环境仍旧是两套不同的实现机制,weex 环境直接使用了 weex 的内置组件 <slider>,关于 slider 组件,可以看其文档:

这篇文章主要介绍 rax-slider 在 weex 环境的实现方式和表现。

二、weex 下源码分析

1、维护的 state

Slider 只维护一个 state: index,值由 this.props.index 决定,默认为 0

2、对 props 的处理

对于 props 的预处理集中在方法 handleNativeProps 上,其中 paginationStyle 如果没有传入,则会使用默认的分页样式 defaultPaginationStyle

  handleNativeProps() {
    const {
      defaultPaginationStyle,
      autoPlay,
      showsPagination,
      paginationStyle,
      autoPlayInterval,
      loop,
      width,
      height
    } = this.props;

    const {index} = this.state;

    let nativeProps = {
      onChange: this.onChange,
      autoPlay: autoPlay,
      showIndicators: showsPagination,
      paginationStyle: paginationStyle ? paginationStyle : defaultPaginationStyle,
      interval: autoPlayInterval,
      infinite: loop,
      index: index,
      ...{
        style: {
          width: width,
          height: height,
          ...this.props.style
        }
      }
    };

    return nativeProps;
  }

3、滚动到指定的内容

在 weex 下,通过 setState 直接设置当前的 index 来控制页面的滚动,这是由 weex 的 <slider> 组件内部实现的动画。

  slideTo(index) {
    if (isWeex) {
      this.setState({
        index: index
      });
    }
  }

4、内容渲染

如果对 weex 的 slider 组件熟悉,其分页是一个单独的组件,是 <indicator >,所以上面样式中的 paginationStyle 是应用在 indicator 组件上。

render() {
  if (isWeex) {
    const children = this.props.children;
    const nativeProps = this.handleNativeProps();
    return (
      <slider {...nativeProps}>
        {nativeProps.showIndicators ?
          <indicator style={nativeProps.paginationStyle} /> :
          null}
        {children}
      </slider>
    );
  }

三、发现的问题

一般在 rax 中,css 是不使用单位的,比如 width:750 或者 height:500,但是在 slider 中,是不起作用的。

rax-slider 需要通过 props 传入 widthheight,但是 props.widthprops.height 必须有单位。 width 和 height 直接打进了 <slider> 的 style,同时我也发现,weex 中的 slider 如果 height 和 width 没单位也是不起作用的。

下面是在 playground 的示例:

1111.png

如果写了单位,如下:

22222.png