由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容，假如让页面只展示有限的数据，到底部时自动加载下一页的内容就可以解决这一问题，这就是无限滚动。
一、实现的原理
1.视窗滚动到底部
2.原有数据展示完毕后，判断总数据是否大于已展示的数据，如果大于则继续向后端申请数据
3.将后端获取的新数据与此前数据合并展示在页面，由此形成无限滚动效果
二、引入组件
无限滚动效果需要引入InfiniteScroll无限滚动和PullToRefresh下拉刷新组件，官网Ant Design Mobile - Ant Design Mobile
1.PullToRefresh下拉刷新
适用于对当前页面进行内容更新
当页面下拉至底部时，页面自动刷新更加数据
2.InfiniteScroll 无限滚动
列表滚动到底部自动加载更多数据，当 hasMore 属性为 true 时，用户页面滚动到底部 threshold (默认为 250px)时无限滚动组件会调用定义的 loadMore 函数。
children：渲染自定义指引内容；loadMore：加载更多的回调函数；threshold：触发加载事件的滚动触底距离阈值，单位为像素；hasMore：是否还有更多内容
3、在页面使用无限滚动组件
引入组件后，在页面用组件包裹正文内容。
problemList为当前所展示的页面数据，申请的数据为第一页，单页10条数据
当页面划到底部刷新后，page+1，加载第二页的十条数据，以此类推，刷新时重回page等于1的状态
将第一页的 problemList加上后续拿到的数据，形成一个新的 problemList，并将数据显示在页面上
此时无限滚动效果就成功了。
标签：滚动,效果,无限,组件,加载,数据,页面 From： https://www.cnblogs.com/AllenPan/p/16939557.html