Question

描述

动态 View 的滚动组件，用于大量数据列表场景。在 Weex 下是对 list 与 cell 的包装，它通过内部子组件复用提升了滚动列表的性能。

安装

$ npm install rax-recyclerview --save

属性

属性	类型	默认值	必填	描述	支持
onEndReachedThreshold	number	500	✘	设置加载更多的偏移
onEndReached	function	-	✘	滚动区域还剩onEndReachedThreshold的长度时触发
onScroll	function	-	✘	滚动时触发的事件，返回当前滚动的水平垂直距离
itemSize	function/number	-	✘	返回每个 cell 的高度(节点回收时需要)
totalSize	number	-	✘	当前列表总高度(在 cell 高度可变的列表中需要传)

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

方法

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

参数

参数类型为 Object，包含以下属性

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

示例

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

function Thumb() {
  return (
    <RecyclerView.Cell>
      <View style={styles.button}>
        <View style={styles.box} />
      </View>
    </RecyclerView.Cell>
  );
}
let THUMBS = [];
for (let i = 0; i < 20; i++) THUMBS.push(i);
let createThumbRow = (val, i) => <Thumb key={i} />;

function App() {
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <RecyclerView
          style={{
            height: 500
          }}>

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

let styles = {
  root: {
    width: 750,
    paddingTop: 20
  },
  sticky: {
    position: 'sticky',
    width: 750,
    top: 0,
    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,
  }
};

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