React-s-listview NPM

React-S-ListView

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

npm.io

安装

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