vist's Introduction

vist

Virtual-list component build with react and rxjs

Selling Point

Vist won't create or remove any DOM when you scroll the list, it will reuse the existing DOM and only change their position and data. But when you resize your window, you'll find the DOM's number is changed, so your virtual list will always have just right number of DOM.

Install

npm install --save vist

Usage

import React from 'react';
import { VirtualList } from 'vist';

class App extends Component {
  constructor(props) {
    super(props);

    const data = new Array(5000).fill(0).map((_, i) => i);

    this.state = {
      data: of(data)
    };
  }

  render() {
    return (
      <VirtualList
        data$={this.state.data}
        options$={of({ height: 60 })}
        style={{ height: 400, border: '1px solid black' }}>
        {(item, index) => (
          <p style={{ height: 59, margin: 0, borderBottom: '1px solid green' }}>
            No. {index} - {item}
          </p>
        )}
      </VirtualList>
    );
  }
}

Props

Property	Type	Description
`data$`	`Observable<any>`	Data source of the list.
`options$`	`Observable<IVirtualListOptions>`	Options of the virtual list.
`style`	`{[key: string]: string	number}`
`className`	`string`	className of VirtualList container.
`keepDom`	`boolean`	Determine whether to reuse the dom.
`uniqKey`	`string`	The key field of list to identify.

`IVirtualListOptions`

Property	Type	Default	Description
`height`	`number`	NOT NULL	Item height, it's necessary, vist use this property to calculate how many rows should be rendered actually.
`spare`	`number`	3	Spare rows out of the view.
`sticky`	`boolean`	true	Whether the scrollTop need to stick to the container's top when the data is changed or not.
`startIndex`	`number`	0	To indicate this start index of the list, and the list will scroll to this start index position when mounted.
`resize`	`boolean`	true	To mark if the real dom number should be recomputed when the window resize.

License

MIT © musicq

vist's People

Contributors

Stargazers

Watchers

vist's Issues

请教问题，为什么这里要+1？

@musicq 你好，在看你的源码发现在复用DOM的算法处有一个小 trick。但是不明所以，故向你请教：

Q1: 为什么这里要 +1 呢？

我试着改了一下此处，发现如果不 +1 在往回滚 1 个 option.height 的时候 getDifferenceIndexes 函数工作不正确，返回的数组为 []。

code

return (this.stateDataSnapshot = data.slice(firstIndex, lastIndex + 1).map(item => ({

code1

let newIndex = dir > 0 ? lastIndex - diffSliceIndexes.length + 1 /* down */: firstIndex /* up */;

Q2: 为什么 +1 就可以正常工作了呢？
如果你能在百忙中回复，这也许能够帮助晚辈很快理解这个 trick 用法的原因。

代码经过这样的修改后工作正常，不用 +1 也正确 diff index。

const newIndexes = new Array(endIndex - startIndex)
        .fill(startIndex)
        .map((i, d) => i + d);
      const diffIndexes = pool.reduce((acc, cur, idx) => {
        if (!newIndexes.includes(cur.$pos)) {
          acc[acc.length] = idx;
        }

        return acc;
      }, []);