2.0.1 • Published 1 year ago
rax-waterfall v2.0.1
rax-waterfall
支持
Web / Weex / 小程序(运行时)
描述
用于实现瀑布流的列表容器
安装
$ npm install rax-waterfall --save
属性
属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
---|---|---|---|---|---|
dataSource | array | - | true | 瀑布流数组,需要传入模块高度 | |
renderItem | function | - | true | 渲染每项的模板 | |
renderHeader | function | - | false | 渲染 header 部分 | |
renderFooter | function | - | false | 渲染 footer 部分 | |
columnWidth | number | 750 | false | 列宽 | |
columnCount | number | 1 | false | 列数 | |
columnGap | number | 0 | false | 列间距 | |
cellProps | object | - | false | weex Cell 组件的props | |
onEndReachedThreshold | number | 500 | false | 设置加载更多的偏移 | |
onEndReached | function | - | false | 滚动区域还剩onEndReachedThreshold 的长度时触发 | |
leftGap | number | 0 | false | 距离左边的间隙 | |
rightGap | number | 0 | false | 距离右边的间隙 |
方法
scrollTo({x: number,y: number, animated?: boolean, duration?: number})
参数
参数为 object,包含以下属性
属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
---|---|---|---|---|---|
x | number | - | 否 | 横向的偏移量 | |
y | number | - | 否 | 纵向的偏移量 | |
animated | boolean | true | 否 | 在设置滚动条位置时使用动画过渡 | |
duration | number | 400 | 否 | 当 animated 设置为 true 时,可以设置 duration 来控制动画的执行时间,单位 ms |
示例
import {createElement, Component, render} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import DU from "driver-universal"
import RefreshControl from 'rax-refreshcontrol';
import Waterfall from 'rax-waterfall';
let dataSource = [
{ height: 550, item: {} },
{ height: 624, item: {} },
{ height: 708, item: {} },
{ height: 600, item: {} },
{ height: 300, item: {} },
{ height: 100, item: {} },
{ height: 400, item: {} },
{ height: 550, item: {} },
{ height: 624, item: {} },
{ height: 708, item: {} },
{ height: 600, item: {} },
{ height: 300, item: {} },
{ height: 100, item: {} },
{ height: 400, item: {} }
];
class App extends Component {
state = {
refreshing: false,
dataSource: dataSource
}
handleRefresh = () => {
if (this.state.refreshing) {
return;
}
this.setState({
refreshing: true,
dataSource: []
});
setTimeout(() => {
this.setState({
refreshing: false,
dataSource: dataSource
});
}, 500);
}
loadMore = () => {
setTimeout(() => {
this.setState({
dataSource: this.state.dataSource.concat(dataSource)
});
}, 1000);
}
render() {
return (<View style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
<View>first module</View>
<Waterfall
columnWidth={150}
columnCount={4}
columnGap={50}
dataSource={this.state.dataSource}
renderHeader={() => {
return [
<RefreshControl
key="0"
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}>
<Text>下拉刷新</Text>
</RefreshControl>,
<View key="1" style={{width: 750, height: 100, backgroundColor: 'yellow', marginBottom: 20}}>header1</View>,
<View key="2" style={{width: 750, height: 100, backgroundColor: 'green', marginBottom: 20}}>header2</View>
];
}}
renderFooter={() => {
return <View key="3" style={{width: 750, height: 300, backgroundColor: 'blue', marginTop: 20}}>footer1</View>;
}}
renderItem={(item, index) => {
return (<View style={{height: item.height, backgroundColor: 'red', marginBottom: 20}}>
<Text>{index}</Text>
{/* {index} */}
</View>);
}}
onEndReached={this.loadMore} />
</View>);
}
}
render(<App />, document.body, { driver: DU });
2.0.1
1 year ago
2.0.0
2 years ago
1.2.3-1
2 years ago
1.2.3-0
2 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.2.0-2
4 years ago
1.1.2
4 years ago
1.1.2-beta.0
4 years ago
1.2.0-1
4 years ago
1.2.0-0
4 years ago
1.1.1
4 years ago
1.1.1-beta.1
4 years ago
1.1.0
4 years ago
1.1.0-1
4 years ago
1.0.1-2
4 years ago
1.0.1-1
4 years ago
1.1.0-0
5 years ago
1.0.0
5 years ago
1.0.0-beta.3
5 years ago
1.0.0-beta.2
5 years ago
1.0.0-beta.1
5 years ago
1.0.0-beta.0
5 years ago
0.6.5
6 years ago
0.6.4
6 years ago
0.6.3
6 years ago
0.6.2
6 years ago
0.6.0
6 years ago
0.5.4
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.20
7 years ago
0.4.19
7 years ago
0.4.18
7 years ago
0.4.17
7 years ago
0.4.16
7 years ago
0.4.15
7 years ago
0.5.0-beta
7 years ago
0.4.14
7 years ago
0.4.13
7 years ago
0.4.12
7 years ago
0.4.11
7 years ago
0.4.10
7 years ago
0.4.9
7 years ago
0.4.8
7 years ago
0.4.7
7 years ago
0.4.6
7 years ago
0.4.5
7 years ago
0.4.4
7 years ago
0.4.3
7 years ago
0.4.2
7 years ago
0.4.1
7 years ago
0.4.0
7 years ago
0.3.8
7 years ago
0.3.7
7 years ago