方案就是把所有的数据请求出来，利用下拉滚动条去二次添加数据，例如首次只展示100条，等下拉到底部时将接着的100条push到对应下拉展示的数组里
// 目标事件是onPopupScroll this.state={ pageIndex:1, // 第一页加载的 pageSize: 100, // 加载的数据间隔大小 scrollPage: 1, // 滚动的是第几次 keyWords:'', // 搜索的关键字 optionData:[], // 输入框目前展示的数据 data:[] // 请求出来的所有数据 } <SelectComp mode={mode} className={styles.selectWarper} disabled={disabled} onChange={onChange} onPopupScroll={onPopupScroll} onBlur={onBlur} value={value} opFlow={opFlow} optionList={optionList} /> handler = e => { console.log('handler') e.persist() const { target } = e const rmHeight = target.scrollHeight - target.scrollTop const clHeight = target.clientHeight if (rmHeight < clHeight + 5) { const { scrollPage } = this.state; this.setState({ scrollPage: scrollPage + 1 }) //调用处理数据的函数增加下一页的数据 this.loadOption(scrollPage + 1) } }; loadOption = pageIndex => { const { data,optionData } = this.state const { pageSize, keyWords } = this.state const newPageSize = pageSize * (pageIndex || 1); let newOptionsData = [] let len if (data.length > newPageSize) { len = newPageSize } else { len = data.length } if (!!keyWords) { let data_ = data.filter(item => item.shortName.indexOf(keyWords) > -1) || [] data_.forEach((item, index) => { if (index < len) { newOptionsData.push(item) } }) } else { // data.forEach((item, index) => { // console.log(item,'item',index,'index') // if (index < len) { // newOptionsData.push(item) newOptionsData=data.slice(0,newPageSize) // } // }) } this.setState({ optionData: newOptionsData, handlerLists:newOptionsData, }) };
