react-s-listview

React-S-ListView

这是一个基于JavaScript原生实现的react组件，实现了上拉加载更多，和下拉刷新，以及懒加载的列表组件

github地址

安装

npm install react-s-listview

使用

import ListView from 'components/ListView/ListView';

export default class DemoList extends PureComponent {

    state = {
        ary: [1, 2, 3, 4, 5, 6]
    }

    _onPullDownRefrsh = (resolve, reject) => {
        const {ary} = this.state;
        setTimeout(() => {
            this.setState({
                ary: [1, 2, 3, 4, 5, 6]
            });
            resolve();
        }, 1000);
    };

    _onPullUpRefrsh = (resolve, reject) => {
        const {ary} = this.state;
        setTimeout(() => {
            this.setState({
                ary: ary.concat([1, 2, 3])
            });
            resolve(0);
        }, 1000);
    };

    _renderRow = ({data, index}) => {
        return (
            <div> row </div>
        );
    }

    render() {
        const {scrollY, loadMore} = this.videoListStore || {};
        const {ary} = this.state;
        return (
            <ListView
                ref="listview"
                style={{backgroundColor: '#fff'}}
                dataSource={ary}
                renderRow={this._renderRow}
                startY={scrollY}
                loadMore={loadMore}
                isLazyload={true}
                itemHeight={`${313 / 37.5}rem`}
                itemClassName={styles.listCon}
                onPullDownRefrsh={this._onPullDownRefrsh}
                onPullUpRefrsh={this._onPullUpRefrsh}/>
        )
    }
}

属性

属性	值类型	默认值	描述
dataSource	array	列表数据源	[]
renderRow	any	无	列表item布局
isRefreshPullDown	bool	true	是否启用下拉刷新
isRefreshPullUp	bool	true	是否启用上拉加载
onPullDownRefrsh	func	无	下拉刷新回调事件
onPullUpRefrsh	func	无	上拉加载回调事件
pullDownTexts	array	[‘下拉刷新’, ‘释放刷新’, ‘加载中’, ‘刷新成功’]	下拉刷新提示文字
pullUpTexts	array	[‘正在加载…’, ‘没有更多数据了…’]	上拉刷新提示文字
pullDown	any	默认样式	下拉刷新布局
pullUp	any	默认样式	上拉加载布局
pullUpLoading	bool	true	是否显示上拉加载样式
loadMore	bool	true	是否上拉加载
startY	number	0	listview显示位置
isLazyload	bool	true	是否启用懒加载
itemHeight	string	0	启用懒加载后（必传）item的高度
itemClassName	string	无	启用懒加载后可设置item class
placeholder	any	无	懒加载未加载时显示的占位布局