标签: infinite-scroll

我们的应用程序使用无限滚动来导航异类项目的大型列表.有一些皱纹:

• 我们的用户通常拥有10,000个项目的列表,需要滚动3k +.
• 这些是丰富的项目,因此在浏览器性能变得不可接受之前,我们只能在DOM中使用几百个.
• 这些物品的高度各不相同.
• 这些项目可能包含图像,我们允许用户跳转到特定日期.这很棘手,因为用户可以跳转到列表中我们需要在视口上方加载图像的位置,这会在加载时推送内容.未能处理这意味着用户可能会跳转到某个日期,但随后会转移到更早的日期.

已知的不完整解决方案:

• https://github.com/guillaumervls/react-infinite-scroll - 这只是一个简单的"当我们触及底部时加载更多"组件.它不会剔除任何DOM,因此会死于数千个项目.

• http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html - 显示如何在顶部插入或插入底部时存储和恢复滚动位置,但不能同时插入.

我不是在寻找完整解决方案的代码(虽然那会很棒.)相反,我正在寻找"反应方式"来模拟这种情况.滚动位置是否状态？我应该跟踪什么状态来保留我在列表中的位置？当我在渲染的底部或顶部附近滚动时,我需要保持什么状态才能触发新的渲染？

我正在寻找使用React实现无限滚动的方法.我遇到了react-infinite-scroll并发现它效率低,因为它只是向DOM添加节点而不删除它们.有没有经过验证的React解决方案,它将在DOM中添加,删除和维护恒定数量的节点.

这是jsfiddle问题.在这个问题中,我希望一次只有DOM中的50个元素.当用户向上和向下滚动时,应加载和删除其他内容.我们已经开始使用React,因为它的优化算法.现在我找不到解决这个问题的方法.我遇到过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 (<Hello name="World"></Hello>);
        });

        return (<ul>{response}</ul>)
    }
});

React.renderComponent(<HelloList/>, document.getElementById('content'));

寻求帮助......

我正在尝试在我使用Coldfusion开发的网站上设置无限滚动,我是javascript和jquery的新手,所以我有一些问题包围了所有这些.我是否需要在我的网站上进行分页才能使用无限滚动插件,或者有没有办法实现它？

我有一个视图,其中可以有大量的项目供用户滚动,我想实现无限滚动以启用内容的渐进加载.

看起来有些人已经完成了分页,但谷歌没有提出任何讨论他们如何使用Ember/Ember Data完成无限列表的人.任何人都已经完成了这个并有一个博客文章/示例代码分享？

Jon Willis发布了如何使用他的代码实现无限滚动.在那里,他说他在Android支持库的ViewPager类中进行了一些更改.已经进行了哪些更改以及如何使用ViewPager更改"重新编译"库？

我试图Backbone.Paginator.js在同一页面上运行多个app(多个paginator实例).

我创建了一个测试页面.(导航到backbone.paginator/examples/netflix-infinite-paging).

我保留了代码app.js和创建app2.js,这是一个克隆,app.js但所有的JavaScript代码都位于一个文件中,应用程序已重命名为app2.

两个实例在第一次加载页面时起作用,但后续请求/刷新只加载app2.js的数据.

是否可以在同一页面上运行多个实例？

• 我有兴趣使用自动分页(无限/无限滚动)所以我试图使用保罗爱尔兰语,jQuery Infinite Scroll plugin但我无法让它工作.
• 我正在启动插件来运行文档就绪(这不起作用,如预期的那样),但也运行app2的ResultView中的代码,这也不起作用.

关于如何获得自动分页无限滚动解决方案的任何想法？

• 我遇到了https://github.com/joneath/infiniScroll.js,但我不确定如何将它与Backbone.Paginator.js集成.
• 我还在学习,任何帮助将不胜感激!:)

更新:在跨不同浏览器进行进一步测试后,似乎问题可能是缓存问题/差异.例如,在Safari中,它在刷新页面时有时(随机)工作.我不知道如何调试.有任何想法吗？

我正在尝试使用angularjs无限滚动 它似乎只有在滚动相对于浏览器窗口时才有效.

我想在内部DIV中进行无限滚动,即我有一个带有通用包装器的页面和一个用于显示实际内容的内部div.

包装页面设置为经过整个窗口,因此永远不会滚动.但是包含内容的内部div有自己的滚动条.

如何让无限滚动相对于内容内容div滚动条工作？

我遵循了Vilen关于SO的优秀答案:在RecyclerView网格中将一个不确定的进度条作为页脚,介绍如何使用ProgressBar实现无限滚动回收视图.

我自己实现它并且它有效,但我想扩展这个例子.我想在recyclerview的顶部添加额外的项目,类似于Facebook在添加新状态更新时的操作方式.

我无法成功地将额外的项添加到列表中 - 这是我在其MainActivity中添加到Vilen代码中的代码:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    if (id == R.id.add) {
        myDataset.add(0, "Newly added");
        mRecyclerView.smoothScrollToPosition(0);
        mAdapter.notifyItemInserted(0);
}
return super.onOptionsItemSelected(item);
}

当我点击"添加"按钮时:

当我向下滚动时,我得到两个旋转器而不是一个:

当旋转器完成并且下一个5个物品被加载时,旋转器仍在那里:

我究竟做错了什么？

我一直在努力完成这项任务已有一段时间了.我想要开发的是一个scrollview或collectionview,它可以连续滚动垂直和水平.

这是我认为这应该是什么样子的图像.透明框是从存储器重新加载的视图/单元.一旦视图/单元格进入屏幕之外,它就应该重新用于即将到来的新单元格......就像它的UITableViewController工作方式一样.

我知道一个UICollectionView只能做到无限滚动水平或垂直,而不是两者.但是,我不知道如何使用a UIScrollView.我尝试了关于这个问题的答案所附的代码,我可以让它重新创建视图(例如%20),但这不是我真正需要的东西..此外,它不是连续的.

我知道这是可能的,因为HBO Go应用程序这样做..我想要完全相同的功能.

我的问题:我怎样才能实现目标？是否有任何指南/教程可以告诉我如何？我找不到任何东西.

我正在尝试重新实现这里UICollectionView看到的不定式滚动.对我来说遗失的东西:

ViewController.h:

@interface ViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate>

@end

DataCell.h:

@interface DataCell : UICollectionViewCell
@property (nonatomic, strong) UILabel *label;
@end

DataCell.m:

#import "DataCell.h"

@implementation DataCell

-(instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self){
        self.label = [[UILabel alloc] initWithFrame:self.bounds];
        self.autoresizesSubviews = YES;
        self.label.autoresizingMask = (UIViewAutoresizingFlexibleWidth |
                                       UIViewAutoresizingFlexibleHeight);
        self.label.textAlignment = NSTextAlignmentCenter;
        self.label.adjustsFontSizeToFitWidth = YES;

        [self addSubview:self.label];
    }

    return self;
}

@end

CustomCollectionView.h:

@interface CustomCollectionView : UICollectionView

@end

对于整个项目,我使用了故事板和法线UIViewController.在这个视图控制器上,我UICollectionView在Interface Builder中添加了一个.我将集合视图中的插座与视图控制器连接起来,并设置数据源并再次将方法委托给我的视图控制器.我还在UICollectionViewCellInterface Builder中设置了自定义类和重用标识符.

所以一切都应该工作,但我只得到一个黑屏.我错过了什么？您可以在此处 …