rax-recyclerview

描述

ScrollView 的同门师兄，在 Weex 下是对 list 与 cell 的包装，其具有复用内部组件来提供性能的机制。

安装

npm install rax-recyclerview --save

属性

属性	类型	默认值	必填	描述	支持
onEndReachedThreshold	number	500	✘	设置加载更多的偏移
onEndReached	function	-	✘	滚动区域还剩onEndReachedThreshold的长度时触发
onScroll	function	-	✘	滚动时触发的事件，返回当前滚动的水平垂直距离
itemSize	function/number	-	✘	返回每个 cell 的高度(节点回收时需要)
totalSize	number	-	✘	当前列表总高度(在 cell 高度可变的列表中需要传)
onTouchStart	function	-	false	touchStart触发的事件，返回触摸点数据（touches、changedTouches）
onTouchMove	function	-	false	touchMove触发的事件，返回触摸点数据（touches、changedTouches）
onTouchEnd	function	-	false	touchEnd触发的事件，返回触摸点数据（touches、changedTouches）
onTouchCancel	function	-	false	touchCancel触发的事件，返回触摸点数据（touches、changedTouches）
disableScroll	boolean	-	false	是否禁止滚动，是否禁止滚动, rax-recyclerview@1.3.4 及以上版本支

方法

scrollTo({x:number,y:number})

参数

参数为 object，包含以下属性

属性	类型	默认值	必填	描述
x	number	-	✘	横向的偏移量
y	number	-	✘	纵向的偏移量

scrollIntoView({id: string, animated?: boolean, duration?: number})

支持 Weex 2.0 和未指定 itemSize 时的 Web 场景。

参数

参数为 object，包含以下属性

属性	类型	默认值	必填	描述
id	string	-	是	需要滚动到的元素 id
animated	boolean	true	否	在设置滚动条位置时使用动画过渡
duration	number	400	否	当 animated 设置为 true 时，可以设置 duration 来控制动画的执行时间，单位 ms
offsetX	number	-	否	滚动的额外 X 偏移
offsetY	number	-	否	滚动的额外 Y 偏移

示例

import { createElement, Component, render } from "rax";

import View from "rax-view";

import Text from "rax-text";

import DriverUniversal from "driver-universal";

import RecyclerView from "rax-recyclerview";

class Thumb extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }

  render() {
    return (
      <RecyclerView.Cell>
        <View style={styles.button}>
          <View style={styles.box} />
        </View>
      </RecyclerView.Cell>
    );
  }
}

class Row extends Component {
  handleClick = e => {
    this.props.onClick(this.props.data);
  };

  render() {
    return (
      <View onClick={this.handleClick}>
        <View style={styles.row}>
          <Text style={styles.text}>
            {this.props.data.text + " (" + this.props.data.clicks + " clicks)"}
          </Text>
        </View>
      </View>
    );
  }
}

const THUMBS = [];

for (let i = 0; i < 20; i++) THUMBS.push(i);

const createThumbRow = (val, i) => <Thumb key={i} />;

class App extends Component {
  state = {
    horizontalScrollViewEventLog: false,
    scrollViewEventLog: false
  };

  render() {
    return (
      <View style={styles.root}>
        <View style={styles.container}>
          <RecyclerView
            ref={scrollView => {
              this.scrollView = scrollView;
            }}
            style={{
              height: 500
            }}
            onEndReached={() => alert("reach end")}
          >
            <RecyclerView.Header style={styles.sticky}>
              <Text>Sticky view is not header</Text>​{" "}
            </RecyclerView.Header>
            <RecyclerView.Header>
              <View style={styles.sticky}>
                <Text>Sticky view must in header root</Text>
              </View>
            </RecyclerView.Header>
            {THUMBS.map(createThumbRow)}
          </RecyclerView>
          <View
            style={styles.button}
            onClick={() => this.scrollView.scrollTo({ y: 0 })}
          >
            <Text>Scroll to top</Text>
          </View>
          <View style={styles.eventLogBox}>
            <Text>{this.state.scrollViewEventLog ? "onEndReached" : ""}</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = {
  root: {
    width: 750,
    paddingTop: 20
  },

  sticky: {
    position: "sticky",
    width: 750,
    backgroundColor: "#cccccc"
  },

  container: {
    padding: 20,
    borderStyle: "solid",
    borderColor: "#dddddd",
    borderWidth: 1,
    marginLeft: 20,
    height: 1000,
    marginRight: 20,
    marginBottom: 10
  },

  button: {
    margin: 7,
    padding: 5,
    alignItems: "center",
    backgroundColor: "#eaeaea",
    borderRadius: 3
  },

  box: {
    width: 64,
    height: 64
  },

  eventLogBox: {
    padding: 10,
    margin: 10,
    height: 80,
    borderWidth: 1,
    borderColor: "#f0f0f0",
    backgroundColor: "#f9f9f9"
  },

  row: {
    borderColor: "grey",
    borderWidth: 1,
    padding: 20,
    margin: 5
  },

  text: {
    alignSelf: "center",
    color: "black"
  },

  refreshView: {
    height: 80,
    width: 750,
    justifyContent: "center",
    alignItems: "center"
  },

  refreshArrow: {
    fontSize: 30,
    color: "#45b5f0"
  }
};

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