标签: infinite-scroll

我在寻找一种方式来实现类似可重复使用的细胞UI/NSTableView,但对NSScrollView.基本上我想要像WWDC 2011视频"会话104 - 高级滚动视图技术",但对于Mac.

我有几个问题意识到这一点.第一个:NSScrollView没有-layoutSubviews.我尝试使用-adjustScroll而不是设置不同的失败contentOffset:

- (NSRect)adjustScroll:(NSRect)proposedVisibleRect {
    if (proposedVisibleRect.origin.x > 600) {
        //  non of them work properly
        // proposedVisibleRect.origin.x = 0;
        // [self setBoundsOrigin:NSZeroPoint];
        // [self setFrameOrigin:NSZeroPoint];
        // [[parentScrollView contentView] scrollPoint:NSZeroPoint];
        // [[parentScrollView contentView] setBoundsOrigin:NSZeroPoint];
    }
    return proposedVisibleRect;
}

我尝试的下一件事是设置一个具有width数百万像素的真正巨大的内容视图(实际上与iOS相比有效!)但现在的问题是,如何安装重用池？
在滚动到新位置时移动子视图或删除所有子视图并再次插入它们会更好吗？以及我应该如何以及在哪里这样做？

我有一个UIScrollView,其内容大小为1200x480.我有一些图像视图,其宽度加起来600.当向右滚动时,我只是增加内容大小并设置偏移量,以使一切顺利(然后我想添加其他图像,但这并不重要马上).所以基本上,当前在视口中的图像保留在左侧的某个位置,最终将从超级视图中删除.

现在,当我向左滚动时,我遇到的问题.我所做的是将图像移动到内容大小的末尾(因此为每个图像视图的origin.x添加600),然后相应地设置内容偏移.当手指在屏幕上并且用户拖动时(scrollView.isTracking = YES),它可以工作.当用户向左滚动并放开(scrollView.isTracking = NO)时,图像视图最终向右移动太快并且几乎立即消失.有没有人知道我怎么能让图像移动得很好而且不会消失,即使用户没有手动拖动视图并且已经放开了？

这是我水平拖动的代码:

-(void) scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint offset = self.scrollView.contentOffset;
    CGSize size = self.scrollView.contentSize;

    CGPoint newXY = CGPointMake(size.width-600, size.height-480);

    // this bit here allows scrolling towards the right
    if (offset.x > size.width - 320) {
        [self.scrollView setContentSize:CGSizeMake(size.width+320, size.height)];
        [self.scrollView setContentOffset: offset];
    }

    // and this is where my problem is:
    if (offset.x < 0) {
        for (UIImageView *imageView in self.scrollView.subviews) {
            CGRect frame = imageView.frame;
            [imageView setFrame:CGRectMake
                (frame.origin.x+newXY.x, frame.origin.y, 200, frame.size.height)];
        }
        [self.scrollView setContentOffset:CGPointMake(newXY.x+offset.x, offset.y)]; …

我正在使用Backbone.js在页面上一次加载20个项目,当你向下滚动到底部时获取更多项目,直到没有剩余的项目从服务器获取.

同时,我想要一个输入字段,当您键入名称时,它会过滤匹配的项目.

问题是,如果您还没有滚动到底部并获取完整集,则输入过滤器将仅匹配页面上当前的项目.

将UI过滤与延迟加载的项目相结合,在技术上和视觉上最好的解决方案是什么？

编辑:这里的真实情况是加载你的所有Facebook朋友,这可能是非常慢,并与其他api混搭.我不想一次加载所有因为经验延迟.

很多tumblr主题都带有jquery无限滚动插件.但是,每页的最大照片数为15,这对我来说太小了.如何修改jquery一次自动加载2或3页？

网站:http://asnip.tumblr.com

有很多网站使用这种(imo)恼人的"无限滚动"风格.例如tumblr,twitter,9gag等网站.

我最近尝试使用HtmlAgilityPack以编程方式从这些网站中删除一些图片.像这样:

HtmlWeb web = new HtmlWeb();  
HtmlDocument doc = web.Load(url);
var primary = doc.DocumentNode.SelectNodes("//img[@class='badge-item-img']");
var picstring = primary.Select(r => r.GetAttributeValue("src", null)).FirstOrDefault();

这工作正常,但当我尝试从某些网站加载HTML时,我注意到我只收回了少量内容(比如前10个"帖子"或"图片",或者其他什么......)我想知道是否可以在c#中模拟页面的"向下滚动".

这不仅仅是我以编程方式加载html的情况,当我只是去tumblr这样的网站时,我检查firebug或只是"查看源代码",我预计所有内容都会在某处,但很多好像是用javascript隐藏/插入.HTML源中只显示我的屏幕上实际可见的内容.

所以我的问题是:是否可以模拟无限滚动到页面,并用c#(最好)加载到那个HTML？

(我知道我可以使用API​​用于tumblr和twitter,但我只是想和HtmlAgilityPack一起玩一些有趣的黑客攻击)

我正在使用jScroll对从AJAX调用返回的搜索结果进行分页:

$('#search').keyup(function() {
    var search = $(this).val();
    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();
    });
});

进行新搜索后,当我滚动到底部时,jScroll会加载旧搜索的最后一个href的内容.

因此,如果我的旧_nextHref是/search?query=A&page=3,我在搜索字段中输入B,而不是/search?query=B&page=2从新的href 加载,它将/search?query=A&page=3从旧的href 加载.

显然从ajax成功函数调用jscroll()将不会重建它并且_nextHref保持设置为其旧值.我尝试在加载它之前将其销毁,但它会完全保留它:

$('#search').keyup(function() {
    var search = $(this).val();

    $('.scroll-table').jscroll.destroy();

    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();  /* now jScroll won't load at all */
    });
});

能否请您举例说明如何重新初始化jScroll以便加载新的href？

我已经安装了Wordpress Jetpack并配置了我的所有内容functions.php,但由于某种原因它无法正常工作.我已按照这些说明和Jetpack网站上的说明进行操作,但似乎没有任何内容......开发人员工具显示了AJAX响应{“type”:“empty”}.

我希望从自定义分类中加载项目.在archive.php页面上,我有一个简单的PHP加载内容:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

content.php包含每个帖子的模板,作为静态页面,它工作正常.我安装了Jetpack并将以下内容放入我的functions.php:

function bones_infinite_loop_init(){
    add_theme_support( 'infinite-scroll', array(
        'type'           => 'scroll',
        'container'      => 'masonry',
        'render'         => 'bones_infinite_scroll_render',
        'footer'         => false
    ) );
}
add_action( 'init', 'bones_infinite_loop_init' );

function bones_infinite_scroll_render() { 
$args = array( 'post_type'=> 'wigwam','post_parent' => 0,'posts_per_page' => 25);
    query_posts( $args );
if (have_posts()) : 
    while (have_posts()) : …

好的，所以我知道这会引起每个人的问题，并且也会引起我的问​​题。我在客户端站点上使用无限滚动插件，并与同位素插件结合使用，以按顺序加载其产品，但问题是，由于他们有1000多种产品，因此任何人浏览该站点然后单击某个产品，当他们单击后退按钮，它们将返回顶部（或恰好在第一页的折叠上方），这会引起很多问题。

我的标记如下：

$(window).load(function () {

    var $container = $('.products-grid-wrap');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.products-grid-block',
            filter: '*:not(.hidden), .products-grid-block',
            animationEngine: 'best-available',
            layoutMode: "perfectMasonry",
            perfectMasonry: {
              columnWidth: 280,
              rowHeight: 310
            }
        });         

        $container.infinitescroll({
            navSelector: '#page_nav', // selector for the paged navigation 
            nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
            itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve
            pixelsFromNavToBottom: Math.round($(window).height() * 1.5),
            bufferPx: Math.round($(window).height() * 1.5),
            loading: {
                finishedMsg: 'No more products to load.',
                img: 'http://www.by-form.net/wp-content/uploads/2014/11/ajax-loader-big.gif'
            } …

当用户到达页面底部时，我table使用无限滚动滚动来加载更多结果并将其附加。

目前，我有以下代码：

var currentPage = 0;
var tableContent = Rx.Observable.empty();

function getHTTPDataPageObservable(pageNumber) {
    return Rx.Observable.fromPromise($http(...));
}

function init() {
    reset();
}

function reset() {
    currentPage = 0;
    tableContent = Rx.Observable.empty();
    appendNextPage();
}

function appendNextPage() {
    if(currentPage == 0) {
        tableContent = getHTTPDataPageObservable(++currentPage)
                .map(function(page) { return page.content; });
    } else {
        tableContent = tableContent.combineLatest(
            getHTTPDataPageObservable(++currentPage)
                    .map(function(page) { return page.content; }),
            function(o1, o2) {
                return o1.concat(o2);
            }
        )
    }
}

有一个主要问题：

每次appendNextPage调用时，我都会得到一个全新的信息 …

我使用以下命令安装了ngx无限滚动ngx-InfiniteScroll:

  npm install ngx-infinite-scroll --save

在我的app.module中,我添加了:

import {InfiniteScrollModule} from 'ngx-infinite-scroll';

在我的进口中,我补充说:

  imports: [
 BrowserModule,
 FormsModule,
 AppRoutingModule,
 BrowserAnimationsModule,
 InfiniteScrollModule,
 NgbModule.forRoot()
]

然后在我的组件中我再次添加:

 import { InfiniteScrollModule } from 'ngx-infinite-scroll';

在我的HTML中,我有:

<div class="col-md-12 tableDiv" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="100" (scrolled)="onScroll()">
  /*table with content here */

我得到的错误是infiniteScrollDistance不是'div'的已知属性,并且不能绑定到它.我做错了什么？我错过了什么步骤？我之前使用它并且它已经工作了.但现在我似乎无法做到这一点.任何提示？