nw-flatlist

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