React-S-ListView

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

安装

npm install react-s-listview or  yarn add react-s-listview

使用

import ListView from 'react-s-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();
        }, 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`} //选用懒加载时，需指定item的高度，否则懒加载将无效
                itemClassName={styles.listCon}
                onPullDownRefrsh={this._onPullDownRefrsh}
                onPullUpRefrsh={this._onPullUpRefrsh}
            />
        )
    }
}

属性

|属性 | 值类型 | 默认值 | 描述 | | ------------- |:-------------:| -----:| -----:| | dataSource | array | [] | 列表数据源 | | renderRow | any | 无 | 列表item布局 | | renderHeader | any | 无 | 列表头部布局 | | renderFooter | any | 无 | 列表尾部布局 | | 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 | false | 是否启用懒加载 | | itemHeight | string | 0 | 启用懒加载后（必传）item的高度 | | itemClassName | string | 无 | 启用懒加载后可设置item class | | placeholder | any | 无 | 懒加载未加载时显示的占位布局 |

内置组件-LazyloadView

使用场景：list列表中，item高度不一致，如下：

import ListView, {LazyloadView} from 'components/ListView/ListView';

export default class Demo extends PureComponent {

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

    componentDidMount() {
        this.listView = this.refs['listview'];
    }

    _getScrollView = () => {
		return this.listView.getScroller();
	}

    _onPullDownRefrsh = async (resolve, reject) => {
	};

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

    _renderRow = ({data, index}) => {
        const {router} = this.props;
        let item, height;
        if(index % 2 === 0) {
            item = <div style={{backgroundColor: '#000', height: '100%'}}/>;
            height = 100;
        }else {
            item = <div style={{backgroundColor: 'red', height: '100%'}}/>;
            height = 150;
        }
        return (
            <LazyloadView
                key={index}
                getScroller={this._getScrollView}
                height={`${height / 37.5}rem`}>
                {item}
            </LazyloadView>
        );
    }

    render(){
        const {router} = this.props;
        const {ary} = this.state;
        return(
            <ListView
                ref="listview"
                dataSource={ary}
                renderRow={this._renderRow}
                startY={0}
                loadMore={true}
                onPullDownRefrsh={this._onPullDownRefrsh}
                onPullUpRefrsh={this._onPullUpRefrsh}/>
        )
    }
}

属性-LazyloadView

|属性 | 值类型 | 默认值 | 描述 | | ------------- |:-------------:| -----:| -----:| | height | string | '0px' | item高度（必传） | | getScroller | func | 无 | 获取listview对象 | | placeholder | any | 默认 | item未显示时占位 | | itemClassName | string | 无 | item class |