标签: infinite-scroll

我想避免使用jQuery或其他库来保持我的代码最小化,我需要很少的功能,我只想在用户滚动到底部时附加到列表.我如何在普通的Javascript中执行此操作？

我正在使用Mika Tuupola的Lazy Load插件http://www.appelsiini.net/projects/lazyload来在您向下滚动长图库时延迟加载图像.问题是在10张图片后,我使用无限滚动,所以我获取接下来的10张图片,并通过ajax附加它们.延迟加载不再适用于下一批附加图像.

这是一个相当javascript的图像库,所以对于其他一切(如工具提示,模态叠加等),我一直在使用jQuery的委托()绑定到插入ajax的元素.Lazy Load插件的问题是我不确定要绑定到哪个事件.

所以说我想懒得加载一类"懒"的图像.我会写这个:

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
});

它适用于前10个图像,但在通过ajax插入更多图像后停止工作.我唯一能想到的是在load事件上使用委托,如下所示:

$(document).delegate("img.lazy", "load", function(event) {  
    $(this).lazyload({ 
         effect: "fadeIn" 
    });     
});

但这打破了一切.谢谢!

编辑: 我用来加载更多记录的jQuery(这是一个Rails应用程序):

$(window).scroll(function() {
    var url;
    url = $(".pagination .next_page").attr("href");
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
    $(".pagination").html("<p>loading more images...</p>");
    return $.getScript(url);
    }
});

$(window).scroll();

我们需要通过滑动图像来协调旋转轮.我已经使用了ViewPager但是在360度旋转之后

我必须从X = 0开始滚动ViewPager.是否有任何ViewPager在滚动到最后位置后从第一页开始？

我使用setScrollX来滚动ViewPager,它也会在旋转动画中引入毛刺.我想要实现像下面的图像.

这是示例应用程序的链接,只是我想要实现的最小化实现.

我的第一个问题是他们如何得到这个滚动条？

http://dl.dropbox.com/u/12337149/scrollbar.png

我在几个地方看过它,所以我认为它可能在公共图书馆？我的第二个问题涉及无限滚动本身.我再次在几个网站上看到它,所以它是一种相对常见的技术,并在某处描述？

我需要创建一个支持双向无限滚动的动态UITableView.我需要把它带到它不循环的地方,而不是只是继续朝这个方向发展,因为它将处理日期.

tableView将在另外两个UITableViews中的UIViewController中; 其中一个是静态的,另一个是动态的(默认方式).这也提出了如何处理我的一些数据源方法的问题.也就是说,tableView:NumberOfRowsInSection因为我拥有的数据点的数量将在算法上生成,因此可能是无限的(如:在显示所有数据之前,数据没有定义的数量)

我必须在选项卡上加载第一个网格面板,然后使用loadData()函数将数据加载到存储中,该函数工作正常,但现在,我必须将无限网格滚动与它集成.是什么方法在loadData进入商店后将无限滚动整合到飞行中？我正在使用ExtJS 4.1.请帮助我....这里我在控制器和夹具视图面板中显示我当前的脚本,我已经尝试但不工作.

控制器脚本如下:

var c = this.getApplication().getController('Main'),
    data = c.generateReportGridConfiguration(response,true),
    tabParams = {
        title: 'Generated Report', 
        closable: true, 
        iconCls: 'view', 
        widget: 'generatedReportGrid', 
        layout: 'fit', 
        gridConfig: data
    },
    generatedReportGrid = this.addTab(tabParams);

generatedReportGrid.getStore().loadData(data.data);

在上面的脚本中,一旦我获得Ajax调用响应,使用tabParams添加网格面板并使用gridConfig param传递数据,这将为网格设置字段和列,然后最后声明将网格数据提供给网格.我通过以下参考示例尝试了网格面板设置:http: //dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

在上面的页面,包含的脚本=> http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

我的网格面板脚本如下:

    Ext.define('ReportsBuilder.view.GeneratedReportGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.generatedReportGrid',
     requires: [
        'ReportsBuilder.view.GenerateViewToolbar',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller',
        'Ext.grid.RowNumberer',    
    ],
    initComponent: function() {
         Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'}); 

         var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name',

           // allow the grid to interact with the …

我的模型中有一系列文章,它们很好地呈现为HTML.我想要的是在用户滚动到页面末尾时添加一些新文章.我实现了这一点,但在我看来有一些非常hacky行为:我所做的只是添加了jquery事件处理程序$(window).scroll,如下所示:

function ArticlesViewModel() {
    var self                = this;
    this.listOfReports      = ko.observableArray([]);

    this.loadReports = function() {
        $.get('/router.php', {type: 'getReports'}, function(data){
            self.listOfReports(self.listOfReports().concat(data));
        }, 'json');
    };

    this.loadReports();

    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
            self.loadReports();
        }
    })
};

在我简单的原型场景中它很好用,但我认为即使我隐藏我的模型也会调用此滚动.

那么有更合适的方法来做同样的行为吗？

当我开始处理当前项目时,我被赋予了相当艰巨的任务 - 构建一些本质上可以替代人们在公司内部使用的大型电子表格的东西.

这就是为什么我们认为分页表永远不会工作,老实说我认为分页是愚蠢的.在分页表上显示动态变化的数据是蹩脚的.说第2页上的项目,下一次数据更新可以登陆页面.

所以我们需要构建一个具有漂亮无限滚动的网格.不要误会我的意思,我尝试了很多不同的解决方案.首先,我构建了vanilla ng-repeat的东西并尝试使用ng-infinite-scroll,然后从UI.Utils中进行ng-scroll.这很快让我发现滚动变得非常缓慢,我甚至没有使用任何疯狂的东西,如复杂的细胞模板,ng-ifs或过滤器.很快,表演成了我最大的痛苦.当我开始添加诸如可调整大小的列和自定义单元格模板之类的东西时,没有浏览器可以再处理所有这些绑定.

然后我尝试了ng-grid,起初我很喜欢它 - 易于使用,它有一些我需要的很好的功能,但很快我意识到 - ng-grid非常糟糕.当前版本充满了bug,所有贡献者都停止修复它们并切换到下一个版本.只有上帝知道什么时候可以使用.ng-grid比偶然的van-ng重复得多.

我一直在努力寻找更好的东西.trNgGrid看起来不错,但过于简单化,并没有提供我想要开箱即用的功能.

ng-table与ng-grid没什么不同,可能会导致我同样的性能问题.

当然,我需要找到一种优化绑定的方法.尝试绑定一次 - 不满意,网格仍然是滞后的.(upd:angular 1.3提供{{::foo}}一次性绑定的语法)

然后我尝试了React.最初的实验看起来很有希望,但是为了构建更复杂的东西,我需要学习React细节,除此之外感觉有点非anguleresque并且谁知道如何测试使用angular + react构建的指令.我为构建良好的自动化测试所做的所有努力都失败了 - 我找不到让React和PhanthomJS相互喜欢的方法(这可能是更多Phantom的问题.是否有更好的无头浏览器)另外React没有解决"追加到DOM" "问题 - 当你将新元素推入数据数组时,几毫秒浏览器会阻止UI线程.那当然是完全不同类型的问题.

在看到我的挣扎之后,我的同事(在服务器方面工作)抱怨我已经花了太多钱,试图解决性能问题.他让我尝试了SlickGrid,告诉我故事这是如何最好的网格小部件.老实说,我试过了,很快就想烧掉我的电脑.那件事完全取决于jQuery和一堆jQueryUI插件,我拒绝突然降到中世纪时期的网络开发并失去所有角度的好处.不,谢谢.

然后我来了ux-angularjs-datagrid,我真的非常非常喜欢它.它使用一些智能坏屁股算法来保持响应速度.项目很年轻,但看起来非常有前景.我能够构建一些具有大量行的基本网格(我的意思是大量的行),而不会偏离角度zen和滚动仍然平滑的方式太多.不幸的是,它不是一个完整的网格小部件解决方案 - 你不会有可调整大小的列和开箱即用的其他东西,文档有点缺乏,等等.

我也发现了这篇文章,并对此有了复杂的感觉,这些家伙应用了一些非文明的黑客攻击角度,而且很可能那些会破坏角度的特征版本.

当然,至少有一些付费选项,如Wijmo和Kendo UI.那些与angular兼容,但是显示的示例是非常简单的分页表,我不确定是否值得尝试它们.我可能最终会遇到相同的性能问题.此外,你不能有选择地只为网格小部件支付,你必须购买整个套件 - 我可能永远不会使用的狗屎.

所以,最后我的问题 - 是否有良好的,保证的,不那么痛苦的方式来获得具有无限滚动的漂亮网格？有人能指出好的例子,项目或网页吗？使用ux-angularjs-datagrid或更好地使用angular和react来构建我自己的东西是否安全？有人试过Kendo或Wijmo网格吗？

请!不要投票支持关闭这个问题,我知道stackoverflow上有很多类似的问题,我几乎读过它们中的每一个,但问题仍然存在.

我试图让ngInfiniteScroll工作,但徒劳无功--Plunker.滚动事件仅在页面加载时触发,之后似乎没有任何内容触发它.任何人都可以请一些亮点.

我尝试了各种组合,没有工作:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent

infinite-scroll='loadMore()' infinite-scroll-distance='2' 

HTML:

<body ng-app="app" ng-controller="listController">
      <div id="list-wrapper">
          <div class="list" infinite-scroll='loadMore()' 
        infinite-scroll-distance='2' 
        infinite-scroll-container="'#list-wrapper'">
            <div class="header">

            </div>

            <div class="list-table" >
                <table class="table">
                    <tbody>
                        <tr ng-repeat="item in infiniteList">
                            <td style="width:100%">
                                <div>{{item}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style='clear: both;'></div>
            </div>
      </div>

JS:

var app = angular.module("app", ['infinite-scroll']);

app.controller('listController', ['$scope','$http', function ($scope,$http) {
    $scope.infiniteList = [];
    $scope.incr = 1;

    $scope.loadMore = function(){
      console.log("scroll");
        for(var i = 0; i< 30; i++){
            $scope.infiniteList.push("Item " + …

我想在Angular应用程序上使用虚拟滚动。我列表中的项目是远程页面搜索的结果。每当我向下滚动视口时，我想加载更多结果（调用下一页）。

这是我的模板：

<div class="container">
    <cdk-virtual-scroll-viewport itemSize="100">
        <li *cdkVirtualFor="let item of searchResult">{{item}}</li>
    </cdk-virtual-scroll-viewport>
</div>

这是我根据需要进行的尝试：

export class SearchComponent {
    @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
    searchPageNumber: number;
    searchResults: Array<any>;

    constructor(private scrollDispatcher: ScrollDispatcher, private searchService: SearchService) {
        this.searchPageNumber = 0;
        this.searchResults = [];
    }

    ngOnInit(): void {
        this.nextSearchPage(this.searchPageNumber);
    }

    ngAfterViewInit(): void {
        //this.scrollDispatcher.register(this.scrollable);
        //this.scrollDispatcher.scrolled(1000)
        //    .subscribe((viewport: CdkVirtualScrollViewport) => {
        //        console.log('scroll triggered', viewport);
        //    });

        this.virtualScroll.renderedRangeStream.subscribe(range => {
            console.log('range', range);
            console.log('range2', this.virtualScroll.getRenderedRange());
            if (this.virtualScroll.getRenderedRange().end % 10 === 0) {
                this.nextSearchPage(++this.searchPageNumber);
            }
        });
    }

    nextSearchPage(pageNumber: number): …