zent/src/select/demos/8.scrollable.md

一套前端设计语言和基于React的实现

---
order: 8
zh-CN:
	title: 滚动加载
	placeholder: 请选择
en-US:
	title: Scroll Loading
	placeholder: Please Select
---

```js
import { useState, useEffect } from 'react';
import { Select, InfiniteScroller, InlineLoading } from 'zent';

const OPTIONS = [];
let optionIndex = 0;
let firstOpen = true;

function loadOptions() {
  return Array(10).fill(null).map(_ => {
      optionIndex++;

      return {
        key: String(optionIndex),
        text: `Option ${optionIndex}`,
      }
    });
}

function CustomerSearch() {
	const [options, setOptions] = useState(OPTIONS);
	const [loading, setLoading] = useState(true);
  const [open, onOpenChange] = useState(false);
  
  // 处理浮层打开
  function handleOpenChange(isOpen) {
    onOpenChange(isOpen);

    // 首次打开浮层加载数据
    if (isOpen && firstOpen) {
      firstOpen = false;

      setLoading(true);
      setTimeout(() => {
        setOptions(loadOptions());
        setLoading(false);
      }, 2000);
    }
  }

  // 滚动加载
  function loadMore(closeLoading) {
    setTimeout(() => {
      setOptions(options.concat(loadOptions()));
      closeLoading && closeLoading();
    }, 20000);
  }

  function renderOptionList(optionList, renderOption) {
    return (
      <InfiniteScroller
        hasMore
        skipLoadOnMount
        loadMore={loadMore}
        className="infinite-scroller-demo"
        loader={(
					<div className="loading-text">
						<InlineLoading
							iconSize={18}
							loading
							icon="circle"
							iconText="加载中…"
							textPosition="right"
							colorPreset="grey"
						/>
					</div>
        )}
      >
        {optionList.map((item, index) => renderOption(item, index))}
      </InfiniteScroller>
    );
  }

	return (
		<Select
			clearable
			options={options}
			placeholder="{i18n.placeholder}"
			loading={loading}
			open={open}
			onOpenChange={handleOpenChange}
			renderOptionList={renderOptionList}
		/>
	);
}

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

<style>
.infinite-scroller-demo {
	max-height: 272px;
}
.loading-text {
	font-size: 12px;
	padding: 7px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>