当前位置: 首页 > 文档资料 > Rax 中文文档 >

Waterfall

优质
小牛编辑
133浏览
2023-12-01

描述

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

安装

$ npm install rax-waterfall --save

属性

属性类型默认值必填描述支持
dataSourceArray-✔️瀑布流数组,需要传入模块高度,数组项为包含height属性的对象,height的值必须为数字
renderItemFunction-✔️渲染每项的模板
renderHeaderFunction-渲染 header 部分
renderFooterFunction-渲染 footer 部分
columnWidthNumber750列宽
columnCountNumber1列数
columnGapNumber0列间距
cellPropsObject-weex Cell 组件的props
onEndReachedThresholdNumber500设置加载更多的偏移
onEndReachedFunction-滚动区域还剩onEndReachedThreshold的长度时触发
leftGapNumber0距离左边的间隙  
rightGapNumber0距离右边的间隙  

注:

  • 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 });