1.17.6 • Published 6 years ago
nw-flatlist v1.17.6
nw-flatlist
列表组件
说明
无限滚动列表组件,虽然现实中不可能是无限滚动的,但是改组件会把远离可视区域的DOM移除以节省内存和改善滚动性能。
一开始使用的react-infinite,但是该组件需要指定每个item的高度,但实际场景中高度是不固定的
后来看试用了下react-virtualized,结果初始渲染时没有正确地布局好,可能是我使用上的问题
安装
$ npm i nw-flatlist
示例
class Comment extends Component {
render() {
const {item, style} = this.props
return (
<div style={style}></div>
)
}
}
class CommentList extends FlatList {
onlistload = () => {
const {dispatch, since_time, eventId, loaded, loading} = this.props;
if (loaded || loading) {
return;
}
dispatch({type: 'COMMENTS_REQUEST', payload: {
endTime: since_time,
eventId,
eventType
}});
}
renderIndicator = () => {
let text
if (loading) {
text = '载入中...'
} else if (loaded) {
text = '没有更多'
}
if (text) {
return <div className={slateStyle.slate}>{text}</div>
}
return null
}
render() {
const style = {
height: '200px'
}
const {list} = this.props
return (
<div style={style}>
<Flatlist ckey="cid"
renderIndicator={this.renderIndicator}
list={list}
loadMore={this.onlistload}
ItemComponent={Comment} />
</div>
)
}
}
const mapStateToProps = (state) => {
return {
comments: state.comments.list,
since_time: state.comments.since_time,
loaded: state.comments.loaded,
loadFail: state.comments.loadFail,
loading: state.comments.loading
}
}
export default connect(mapStateToProps)(CommentList);
API
FlatList
FlatList
Kind: global class