silk-listview v1.0.2

介绍

无限滚动长列表,基于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

dateSource

constructor(data arr)

创建一个DateSource实例,参数通常为ArrayObject类型的初始数据

dataSource.append(data arr)

向列表尾部添加数据,参数通常为ArrayObject类型的数据

dataSource.replace(data arr)

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

dataSource.clear()

清空列表数据