主要代码如下,红色字体为react-virtualized使用代码。 注意scrollElement 的定义,滚动区域宽高都可自定义,根据需要使用组件 import React, { Component } from 'react'; import { List, Flex, Button, Modal } from 'antd-mobile'; import { connect } from 'dva'; import { List as VList, CellMeasurerCache, CellMeasurer,WindowScroller,AutoSizer } from 'react-virtualized'; import GoodsDetail from '../GoodsDetail'; import 'react-virtualized/styles.css'; // only needs to be imported once import styles from './index.less'; const alert = Modal.alert; const ListItem = List.Item; const FlexItem = Flex.Item; class OwnerPlanoutDetail extends Component { constructor(props) { super(props); this.state = { visible:false, width: 0 }; } measureCache = new CellMeasurerCache({ fixedWidth: true, minHeight: 220 }); // 使用WindowScroller必须,根据滚动条所在元素去设置 _setRef = (ref) => { this.setState({scrollElement: ref}); } render() { const self = this; const { goods=[] } = this.props; // 商品不足20条时不适用虚拟列表 const dom = goods.map((item,index)=>{ return <GoodsDetail key={index} data={item} /> }); return ( <div ref={this._setRef} key="1"> <List className={styles.titleArea}> 标题 </List> <div className={styles.gutter}></div>
<List style={{marginBottom:'1.5rem'}}>
<h1>商品信息</h1>
{goods.length > 20 ? <WindowScroller
scrollElement = {this.state.scrollElement}
>
{({ height, isScrolling, onChildScroll, scrollTop, registerChild }) => {
return (
<AutoSizer disableHeight>
{({width}) => (
<div ref={registerChild}>
<VList
height={height}
width={width}
isScrolling={isScrolling}
onScroll={onChildScroll}
scrollTop={scrollTop}
rowCount={goods.length}
rowRenderer={
({
key, // Unique key within array of rows
index, // Index of row within collection
parent,
style // Style object to be applied to row (to position it)
})=>{
return (
<CellMeasurer cache={this.measureCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
<GoodsDetail
key={key}
style={style}
data={goods[index]}
/>
</CellMeasurer>
)
}
}
deferredMeasurementCache={this.measureCache}
rowHeight={this.measureCache.rowHeight}
/>
</div>
)}
</AutoSizer>
)
}
}
</WindowScroller> : dom}
</List>
</div>
)
}
}