Tag: infinite scroll

用React JS无限滚动

我正在寻找方法来实现与React无限滚动。 我遇到了react-infinite-scroll ，发现它效率不高，因为它只是向DOM添加节点，并且不删除它们。 React是否有经过validation的解决scheme，可以在DOM中添加，移除和维护不变的节点数量。 这是jsfiddle问题。 在这个问题中，我想在DOM中只有50个元素。 其他人应该加载和删除作为用户上下滚动。 我们已经开始使用React，因为它的优化algorithm。 现在我找不到解决这个问题的方法。 我遇到了airbnb无限的js 。 但它是用Jquery实现的。 要使用这个airbnb无限滚动，我必须松开我不想做的React优化。 我想要添加滚动的示例代码是（这里我正在加载所有项目。我的目标是一次只加载50个项目） /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); var HelloList = React.createClass({ getInitialState: function() { var numbers = []; for(var i=1;i<10000;i++){ numbers.push(i); } return {data:numbers}; }, render: function(){ var response = this.state.data.map(function(contact){ return […]

ReactJS：build模双向无限滚动

我们的应用程序使用无限滚动浏览大型异构项目列表。 有几个皱纹： 我们的用户通常有10,000个项目的列表，需要滚动3k +。 这些是丰富的项目，所以在浏览器性能变得不可接受之前，我们在DOM中只能有几百个。 项目是不同的高度。 这些项目可能包含图像，我们允许用户跳转到特定的date。 这很棘手，因为用户可以跳转到列表中需要在视口上方加载图像的点，这会在加载内容时将内容向下推。 如果处理不好，就意味着用户可能会跳到一个date，但会被转移到更早的date。 已知，不完整的解决scheme： https://github.com/guillaumervls/react-infinite-scroll-这只是一个简单的“当我们碰到底部时加载更多”组件。 它不会剔除任何DOM，所以会死在成千上万的物品上。 http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html – 显示如何存储和恢复滚动的位置，当插入顶部或插入底部，但不是两个在一起。 我没有寻找一个完整的解决scheme的代码（虽然这将是伟大的。）相反，我正在寻找“反应的方式”来模拟这种情况。 是否滚动位置状态？ 我应该跟踪哪个状态以保留我在列表中的位置？ 我需要保持什么状态，以便在滚动显示的底部或顶部附近时触发新的渲染？