---
order: 6
zh-CN:
	title: 滚动加载
en-US:
	title: Scroll Loading Usage
---

```js
import { MenuCascader } from 'zent';
import { clone, getNode } from 'zent/es/cascader/public-options-fns';

const OPTIONS = Array(20)
	.fill(null)
	.map((_, index) => ({
		value: String(index),
		label: `Option ${index}`,
		loadChildrenOnExpand: true,
		loadChildrenOnScroll: true,
	}));

let optionId = 0;

class Simple extends React.Component {
	state = {
		options: OPTIONS,
	};

	onChange = (value, selectedOptions, meta) => {
		console.log(value, selectedOptions, meta);
		this.setState({
			value,
		});
	};

	loadOptions = (selectedOptions, meta) =>
		new Promise((resolve, reject) => {
			const nonLeaf = selectedOptions.length < 2;

			console.log(selectedOptions, meta);

			setTimeout(() => {
				let newOptions = clone(this.state.options);

				if (meta.action === 'loadChildren') {
					const res = Array(10)
						.fill(null)
						.map((_, index) => {
							optionId++;
							return {
								value: `Next ${optionId}`,
								label: `Next ${optionId}`,
								loadChildrenOnExpand: nonLeaf,
								loadChildrenOnScroll: nonLeaf,
							};
						});

					const node = getNode(newOptions, selectedOptions);
					node.children = res;
					// mark as loaded
					node.loadChildrenOnExpand = false;
				} else if (meta.action === 'scroll') {
					const res = Array(10)
						.fill(null)
						.map((_, index) => {
							optionId++;
							return {
								value: `Scroll ${optionId}`,
								label: `Scroll ${optionId}`,
								loadChildrenOnExpand: nonLeaf,
								loadChildrenOnScroll: nonLeaf,
							};
						});

					// 非第一级
					if (selectedOptions.length > 0) {
						const node = getNode(newOptions, selectedOptions);
						node.children = (node.children || []).concat(res);

						// 最多加载 30 条数据
						node.loadChildrenOnScroll = node.children.length < 30;
					} else {
						newOptions = newOptions.concat(res);
					}
				}

				this.setState({
					options: newOptions,
				});

				// 是否可继续加载更多
				resolve(true);
			}, 5000);
		});

	render() {
		return (
			<MenuCascader
				value={this.state.value}
				options={this.state.options}
				onChange={this.onChange}
				loadOptions={this.loadOptions}
				expandTrigger="click"
				scrollable
				clearable
				loadChildrenOnScroll={this.state.options.length <= 20}
			/>
		);
	}
}

ReactDOM.render(<Simple />, mountNode);
```