components之infiniteScroll 注意事项

先吐槽，看官方示例代码看的一头雾水

使用方式：

1.按官方文档来

<InfiniteScroll

    ref={ref}
    style={{ backgroundColor: '#ffffff' }}
    hasMore={hasMore}
    loadMore={loadMore}
    data={list}
    keyExtractor={(word) => word}
    renderItem={({ item: word, index: i }) => (
    <ListItem
        hasBorder
        key={word}
        title={word}
        extraText={String(i)}
        onClick={() => {
            console.log(`click ${word}`)
            warn(word)
        }}
    />
)}
>
{/* 如果不想使用renderItem的方式，直接传入children即可 */}
</InfiniteScroll>

2.如上所示，把children 扔到标签里

<InfiniteScroll

    ref={ref}
    hasMore={hasMore}
    loadMore={loadMore}
>

{{ 你的children, 比如用map或foreach渲染列表  }}
</InfiniteScroll>

其实重要的属性就两个，hasMore和loadMore, 前者判断是否有更多数据并展示加载标识，后者是下拉触发的动作即service

最重要的两点：

1.尾页数据的判断，最后一页是满页或者不足一页的判断

2.如果你发现自己写的逻辑哪里都没问题，但是无限滚动就是不生效，或者一直显示加载中，不妨看下自己的infiniteScroll组件是否在一个固定高度的容器里，可以是100vh, 或者固定高度（或者是页面总高100%，其他部分固定高度，无限滚动部分设置height: 0, flex: 1）