列表找房（十）03-页面滚动效果控制——WindowScroller组件用法 & Scroll属性

页面滚动效果控制——WindowScroller组件用法 & Scroll属性

• 需求：让List列表的滚动随着window窗口的滚动而滚动

  • WindowScroller组件用法

    官网：https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md

    • 导入该组件
    • 使用该组件包裹List组件，并且向List组件提供一个高度

<WindowScroller>
  {({ height, isScrolling, scrollTop }) => {
     /*
       height:表示父窗口的高度
      isScrolling: 监听列表的滚动
      scrollTop：页面的滚动距离
     */
    return (
      <AutoSizer>
        {({ width }) => (
          <List
            autoHeight
            height={height}
            width={width}
            isScrolling={isScrolling}
            scrollTop={scrollTop}
            rowCount={this.state.count}
            rowHeight={140}
            rowRenderer={this.renderHouseItem}
          />
        )}
      </AutoSizer>
    )
  }}
</WindowScroller>

动态加载更多数据

• 目前只能加载前20条数据,使用InfiniteLoader让List可以在滑动时加载更多数据

  • 基本使用

    • 导入对应组件

      import { InfiniteLoader, List } from 'react-virtualized';
      

    • 基本使用

      <InfiniteLoader
        isRowLoaded={isRowLoaded}
        loadMoreRows={loadMoreRows}
        rowCount={remoteRowCount}
      >
        {({ onRowsRendered, registerChild }) => (
          <List
            height={200}
            onRowsRendered={onRowsRendered}
            ref={registerChild}
            rowCount={remoteRowCount}
            rowHeight={20}
            rowRenderer={rowRenderer}
            width={300}
          />
        )}
      </InfiniteLoader>
      

• 项目应用

isRowLoaded = ({ index }) => {
  return !!this.state.list[index]
}
loadMoreRows = ({ startIndex, stopIndex }) => {
  console.log(startIndex, stopIndex)
  // 加载更多数据
  return new Promise(async (resolve, reject) => {
    let res = await axios.get('houses', {
      params: {
        ...this.state.conditions,
        cityId: this.state.city.value,
        start: startIndex,
        end: stopIndex
      }
    })
    this.setState({
      total: res.body.count,
      // 获取到新的数据后进行累加操作
      listData: [...this.state.listData, ...res.body.list]
    }, () => {
      // 此次加载数据已经完成
      resolve()
    })
  })
}

<InfiniteLoader
  isRowLoaded={this.isRowLoaded}
  loadMoreRows={this.loadMoreRows}
  rowCount={this.state.count}>
{({ onRowsRendered, registerChild }) => (
  <WindowScroller>
    {({ height, isScrolling, scrollTop }) => {
      return (
        <AutoSizer>
          {({ width }) => (
            <List
              autoHeight
              height={height}
              width={width}
              isScrolling={isScrolling}
              scrollTop={scrollTop}
              rowCount={this.state.count}
              rowHeight={140}
              rowRenderer={this.renderHouseItem}
              onRowsRendered={onRowsRendered}
              ref={registerChild}
            />
          )}
        </AutoSizer>
      )
    }}
  </WindowScroller>
)}
</InfiniteLoader>