Question

描述

用于实现瀑布流的列表容器，瀑布流中的每一项需要指定高度用于计算布局。

安装

$ npm install rax-waterfall --save

属性

属性	类型	默认值	必填	描述	支持
dataSource	Array	-	✔️	瀑布流数组，需要传入模块高度，数组项为包含height属性的对象，height的值必须为数字
renderItem	Function	-	✔️	渲染每项的模板
renderHeader	Function	-	✘	渲染 header 部分
renderFooter	Function	-	✘	渲染 footer 部分
columnWidth	Number	750	✘	列宽
columnCount	Number	1	✘	列数
columnGap	Number	0	✘	列间距
cellProps	Object	-	✘	weex Cell 组件的props
onEndReachedThreshold	Number	500	✘	设置加载更多的偏移
onEndReached	Function	-	✘	滚动区域还剩onEndReachedThreshold的长度时触发
leftGap	Number	0	✘	距离左边的间隙
rightGap	Number	0	✘	距离右边的间隙

注：

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

• Weex 版本 v0.11.0+ 开始支持。

示例

import { createElement, useState, useRef, render } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import DriverUniversal from "driver-universal"
import RefreshControl from 'rax-refreshcontrol';
import Waterfall from 'rax-waterfall';


// 数据需要指定高度
const data = [
  { 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: {} }
];

let App = (props) => {

  let [refreshing, setRefreshing] = useState(false);

  let handleRefresh = () => {
    if (refreshing) {
      return;
    }
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 500);
  }

  let loadMore = () => {
    console.log('load more');
  }

  return (

      <Waterfall
        columnWidth={370}
        columnCount={2}
        columnGap={10}
        dataSource={data}
        renderHeader={() => {
          return [
            <RefreshControl
              key="0"
              refreshing={refreshing}
              onRefresh={handleRefresh}>
              <Text>RefreshControl</Text>
            </RefreshControl>,
            <View key="1" style={{
              height: 100, 
              backgroundColor: '#efefef', 
              marginBottom: 10
            }}><Text>Header Mod</Text></View>
          ];
        }}
        renderFooter={() => {
          return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>;
        }}
        renderItem={(item, index) => {
          return (
            <View style={{
              height: item.height, 
              backgroundColor: '#efefef', 
              marginBottom: 10
            }}>
              <Text>{index}</Text>
            </View>
          );
        }}
        onEndReached={loadMore} />

  );
}


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