这是个类似表格的布局,数据超出屏幕条数,因此需要每秒向上滚动一格。
使用:
表头渲染:
<div className={s.head}> { structure.map(si => <div key={si.key} className={s.col} style={{width:si.width}}> {si.name} </div>, ) } </div>
structure是定义的表头state
定义state-structure:
structure: [ { name: ‘单位‘, width: ‘50%‘, key: ‘dw‘, ), }, { name: ‘问题‘, width: ‘50%‘, key: ‘wt‘, formatter: (l, i) =>( <span className={s.itemCol}> {l.wt} </span> ), }, ]
<ListArea className={s.body} isSuspend={true} contentCount={this.lxNum} list={list} item={(l, i, ref, currentIndex) => <div key={i} ref={ref} className={s.row}> <div className={s.rowHead}> { structure.map(si => <div key={si.key} className={s.col} style={{width:si.width,}}> {si.formatter ? si.formatter(l, i) : l[si.key]} </div>, ) } </div> </div> } />
ListArea组件实现>>
原文:https://www.cnblogs.com/wuhairui/p/13678578.html