介绍

无限滚动长列表,基于silk-scroller和mobx

demo

原理是将列表分为若干组(建议设置rowsInGroup参数保证每组大约占1屏半的高度),实时判断每组是否在可视区域,如在则显示该组,如不在则渲染一个等高占位容器撑开高度.

安装

$ npm install silk-listview --save

使用

import ListView,{DateSource} from 'silk-listview';

const data = [];
for (let i = 0; i < 300; i++) {
    data.push(i);
}
const dataSource = new DateSource(data);

class ListViewExample extends Component {

    constructor(props) {
        super(props);
        this.lastScrollTop = 0;
        this.state = {
            scrollTop: 0,
            dataSource
        }
    }

    refresh = (resolve) => {
        setTimeout(() => {
            const arr = [];
            for (let i = 0; i < 15; i++) {
                arr.push(i);
            }

            dataSource.replace(arr);

            resolve();
        }, 500)
    }

    loadMore = (resolve) => {
        const arr = [];
        for (let i = dataSource.value.length, len = dataSource.value.length + 15;
             i < len; i++) {
            arr.push(i);
        }

        dataSource.append(arr)
        resolve();
    }

    render() {
        return (
            <ListView
                dataSource={dataSource}
                rowRenderer={item => <div key={item} className="list-view-item">上拉下拉{item + 1}</div>}
                usePullRefresh
                pullRefreshAction={this.refresh}
                useLoadMore
                loadMoreAction={this.loadMore}
            />
        )
    }
}

ReactDOM.render(
    <ListViewExample />, document.getElementById('root')
)

API

props

| Property | Description | Type | Default | |---------------- |----------------|----------|----------| | dateSource | 数据源,一个mobx对象, 当其变更时,列表会自动渲染 | | | | rowHeight | 行高,设定行高会有更好的性能,不设定会自动计算 | number | | | rowsInGroup | 分组行数 | number | 50 | | scrollTop | 初始滚动 | number | 0 | | rowRenderer | 行渲染函数 | function | |

dateSource

constructor(data arr)

创建一个DateSource实例,参数通常为Array[Object]类型的初始数据

dataSource.append(data arr)

向列表尾部添加数据,参数通常为Array[Object]类型的数据

dataSource.replace(data arr)

替换列表数据,会造成重新render,参数通常为Array[Object]类型的数据

dataSource.clear()

清空列表数据