支持自定义懒加载延迟时间

This commit is contained in:
gx 2021-01-13 16:54:00 +08:00
parent 659a86d14e
commit 96ac6b4eba
7 changed files with 28 additions and 22 deletions

View File

@ -113,6 +113,7 @@ class Demo13 extends Component{
focusable
treeData={this.state.treeData}
lazyLoad={true}
debounceDuration={100}
renderTreeNodes={this.renderTreeNodes}
onExpand={this.onExpand}
defaultExpandAll={true}

File diff suppressed because one or more lines are too long

34
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -59,6 +59,7 @@ import 'bee-tree/build/Tree.css';
|expandWhenDoubleClick|双击树节点的时候,是否触发收起/展开动作|bool|false
|treeData|treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点key 在整个树范围内唯一)|array\<{key, title, children, [disabled, selectable]}>|-
|lazyLoad|是否使用懒加载(适用于大数据场景),[如何使用](http://bee.tinper.org/tinper-bee/bee-tree#%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD%E6%A0%91%E8%8A%82%E7%82%B9)|bool|false
|debounceDuration|懒加载时可以传入一个防抖的时长|number|150
|renderTitle|使用 treeData 渲染树时使用,可通过此函数自定义树节点内容|Function(item)|-
|renderTreeNodes|使用 treeData 渲染树节点时,可使用该函数自定义节点显示内容(非必须)|Function(data)|-
|getScrollContainer|用于滚动加载场景,自定义滚动事件监听的容器|Function(data)|-

View File

@ -1109,7 +1109,7 @@ onExpand(treeNode,keyType) {
const props = this.props;
const {
showLine, prefixCls, className, focusable, checkable, loadData, checkStrictly, tabIndexValue, lazyLoad, getScrollContainer,
defaultExpandedKeys, defaultSelectedKeys, defaultCheckedKeys, openAnimation, draggable,
defaultExpandedKeys, defaultSelectedKeys, defaultCheckedKeys, openAnimation, draggable, debounceDuration,
...others
} = this.props;
const customProps = {...omit(others, [
@ -1225,6 +1225,7 @@ onExpand(treeNode,keyType) {
<InfiniteScroll
className="u-tree-infinite-scroll"
treeList={flatTreeData}
debounceDuration={debounceDuration || 150}
handleTreeListChange={this.handleTreeListChange}
getScrollParent={getScrollContainer}
store={this.store}

View File

@ -150,7 +150,7 @@ export default class InfiniteScroll extends Component {
* 绑定scroll事件
*/
attachScrollListener() {
const { store } = this.props;
const { store, debounceDuration } = this.props;
const parentElement = this.getParentElement(this.scrollComponent);
if (!parentElement) {
return;
@ -161,15 +161,14 @@ export default class InfiniteScroll extends Component {
let rowHeight = store.getState().rowHeight;
//默认显示20条rowsInView根据定高算的。
this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : CONFIG.defaultRowsInView;
scrollEl.addEventListener(
'scroll',
debounce(this.scrollListener, 150),
debounce(this.scrollListener, (debounceDuration || 150)),
this.options ? this.options : this.props.useCapture
);
scrollEl.addEventListener(
'resize',
debounce(this.scrollListener, 150),
debounce(this.scrollListener, (debounceDuration || 150)),
this.options ? this.options : this.props.useCapture
);
}