# rax-recyclerview
[](https://www.npmjs.com/package/rax-recyclerview)
## 描述
`ScrollView` 的同门师兄，在 Weex 下是对 `list` 与 `cell` 的包装，其具有复用内部组件来提供性能的机制。
## 安装
```bash
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 偏移 |
### 示例
```jsx
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 (
);
}
}
class Row extends Component {
handleClick = e => {
this.props.onClick(this.props.data);
};
render() {
return (
{this.props.data.text + " (" + this.props.data.clicks + " clicks)"}
);
}
}
const THUMBS = [];
for (let i = 0; i < 20; i++) THUMBS.push(i);
const createThumbRow = (val, i) => ;
class App extends Component {
state = {
horizontalScrollViewEventLog: false,
scrollViewEventLog: false
};
render() {
return (
{
this.scrollView = scrollView;
}}
style={{
height: 500
}}
onEndReached={() => alert("reach end")}
>
Sticky view is not header{" "}
Sticky view must in header root
{THUMBS.map(createThumbRow)}
this.scrollView.scrollTo({ y: 0 })}
>
Scroll to top
{this.state.scrollViewEventLog ? "onEndReached" : ""}
);
}
}
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(, document.body, { driver: DriverUniversal });
```