标签: infinite-scroll

如果这与我之前的帖子发生冲突,请道歉,但我非常坚持无限滚动的整个回调功能,希望有人可以帮助我.

我正在使用Portfolio Slideshow Pro(http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/)将Wordpress与Infinite Scroll结合使用.

这就是我的无限卷轴JS的样子:

<script>
  $(function(){

    var $container = $('.rest-of-content');

    $container.infinitescroll({
      navSelector  : '.wp-paginate',    // selector for the paged navigation 
      nextSelector : '.wp-paginate li a',  // selector for the NEXT link (to page 2)
      itemSelector : '.single-fg-post',     // selector for all items you'll retrieve
      bufferPX: 20,
      loading: {
          msgText: 'Fetching more gold...',
          finishedMsg: 'We\'ve ran out of gold!',
          img: '<?php bloginfo('template_directory'); ?>/images/ajax-loader-black.gif'
        }

    });

  });
</script>

幻灯片插件是一个完整的$(窗口).load所以我把所有东西都拿到里面,然后把它变成一个函数.

$(window).load(function() { portfolioSlideshow() });

但是现在我需要在每次新的帖子加载时回调该函数,尽管infinitescroll正在工作,幻灯片上的JS不是.

有人可以帮我把我创建的函数添加到infinitescroll的回调中,这样每次加载新数据时它都会重新加载函数吗？

非常感谢提前.

-R

在我的主页上,我有一个使用无限滚动的帖子循环.用户可以使用ajax(如ajax搜索等)将该循环替换为其他循环.我的问题是无限滚动仅在第一次使用时才起作用,因此如果它被主循环触发,那么当新循环替换主循环时它将不再起作用.每次新循环替换旧循环时,重新加载以下函数.因此,每次调用新循环时,如何进行无限滚动重置和工作？

var href = 'first';
$(document).ready(function() {
    $('#boxes').infinitescroll({
        navSelector: '.infinitescroll',
        nextSelector: '.infinitescroll a',
        itemSelector: '#boxes .box',
        loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',
        loadingText: 'Loading...',
        donetext: 'No more pages to load.',
        debug: false
    }, function(arrayOfNewElems) {
        $('#boxes').masonry('appended', $(arrayOfNewElems));
        if(href != $('.infinitescroll a').attr('href')) {
            href = $('.infinitescroll a').attr('href');
        }
    });
});

我在wordpress网站上使用Pual Irish无限滚动插件的最新版本2.0b2.120519 .

我正在使用带有Infinite Scroll插件的Isotope插件.使用默认设置Infinite Scroll会自动触发加载新元素,但是,我宁愿使用"加载更多图像"按钮.

我只缺少一小段代码,它将从无限卷轴中获取新元素,我可以传递给同位素INSERT函数.请在下面的代码中查看我的评论:

// initialize infinite scroll
$container.infinitescroll({
    navSelector  : '#paging',    // selector for the paged navigation 
    nextSelector : '#paging a',  // selector for the NEXT link (to page 2)
    itemSelector : '.col',     // selector for all items you'll retrieve
    loading: {
        msgText: 'Loading...',
        finishedMsg: Loaded all!',
             }
    } // <-- NOTE that we do not use callback function here!
    );


$(window).unbind('.infscr'); 

$('#paging a').click(function(){

// NEED CODE HERE TO GET NEW ELEMENTS FROM INFINITE SCROLL AND PASS THOSE ELEMENTS …

我正在开发一个角度应用程序,其中主页面加载1000个图像,但用户一次只能查看20个.我的列表中还有几个过滤器,因此可以根据不同的标准对其进行过滤和排序.

我已经尝试过http://binarymuse.github.io/ngInfiniteScroll/#和http://ngscroller.herokuapp.com/,但似乎都没有那么好用.

Ngscroller确实可以工作,但是当我尝试应用我的过滤器时,它会中断.我也更喜欢这个,因为它不需要我包含jquery.有没有可以做我需要的简单指令？我正在尝试加速我的网页,但如果有一些已经完成此操作的东西,我不想重新发明轮子.

这是我对ngScroller的尝试:http://plnkr.co/edit/r0uhV3OxT2USxmrBQk22？p = preview

<div class="content" ng-controller="MainController" ng-scroller="content">
  <ul class="list" ng-scroller-repeat="item in items | filter:idOver500k | orderBy:predicate:!reverse">
    <li class="item">{{item.text}}</li>
  </ul>
</div>

滚动工作没有过滤器和orderBy,但我正在寻找一种方法来处理所有情况.

加载页面至少需要3秒才能删除图像.看起来只有在获得所有图像时才加载角度.处理这个问题的最佳方法是什么？

谢谢!

问题

今天的现代网站可能会使用无限滚动技术来替换分页列表,以便为用户提供更加无缝的体验.

只要用户不向远处向下滚动这意味着您的文档变得非常复杂且具有大量DOM节点,这一切都很好用.当然有一些方法可以缓解这个问题(DIV例如,用一个合适的高度替换顶部溢出的滚动元素),但它们要么很复杂,要么仍然存在缺陷.

这个想法

我在想是否有人已经看到了一个实现,其中滚动出来的项目(顶部或底部)变得更小和更暗,直到它们消失并被其相邻项目替换.

我正在考虑以下经验:

• 滚动
• 衰退
• 缩放

当您到达任何文章的底部并单击下面显示的下一个推荐的文章时,可以在Medium.com上看到淡入淡出和缩放(单击标题).当你点击它并且如果你注意你可以看到原始文章的效果消失,同时被一个向上滑动的新文章取代.内容滚动可以通过这种方式完成,并且无限滚动将更加平滑且资源消耗更少,因为元素将在运行和就地替换.

同时显示的项目数当然取决于项目的大小.对于中线文章,它可能是一个文章,也会滚动,直到你将其滚动到最底部(或顶部).对于像Facebook这样的帖子,它会同时出现更多项目,因为它们没有占用太多的垂直空间.

Coverflow的工作方式与完全显示中间内容的方式类似,其余部分隐藏或缩放/转换.

这个问题

有人在网上看到过这样的实现吗？如果操作得当,它实际上可以在不占用我们的浏览器的情况下提供更好的无限滚动体验.

但要使我的问题更清晰,更有争议.你能提供这种经验的工作(尽管是简化的)例子吗？

要求:

• 当一个项目滚动时,它会消失(使用淡入淡出/缩放/两者)
• 当项目出现在底部(或向上滚动时)时,它们应显示在与滚动项目相反的项目中
• 迫切通常滚动按钮Home,End,Page Up,Page Down并Space应工作.
• 应该从DOM中删除不可见的项目
• 滚动应该以某种方式使用某种滚动条可用

我正在试图弄清楚如何实现无限滚动列表.它将显示日历和事件,它应该从现在开始或选定日期开始.它应该可以在过去和将来的两个方向上滚动.这里的 OnScrollListener解决方案似乎工作得很好,如果我只需要去未来(索引只是变得更大).但我不明白我将如何回到过去.

这个解决方案似乎对我的情况非常浪费.getView被调用了数千次.也许ListView不是解决方案,我将不得不使用较低级别的代码.有任何想法吗？

编辑:getView被调用了数千次并不是后一种解决方案的错.但是,它仍会被调用太多次并且值不正确.如果我设置这样的选择:

myList.setSelection(Integer.MAX_VALUE的/ 2)

我得到索引从零开始的getView调用.例如,我得到这样的getView调用:

getView pos 0
...
getView pos 26

然后

getView pos 1073741823
...
getView pos 1073741847

哪些是正确的.然后:

getView pos 0
...
getView pos 26

再次

这一切都发生在我滚动或触摸屏幕之前.似乎没有多大意义.

使用ngGrid v2.X,我试图在页面滚动(不是网格滚动)到底时开发一个加载更多数据的网格.

通过搜索类似的问题,我找到了第一个问题的解决方案: ngGrid必须有动态高度,所以我做了这个

.ngViewport{ height:auto !important; } .ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel { width: 100% !important; } .ngRow { border-bottom:none !important; }

这让我想到了第二个问题.我需要通过滚动加载数据,我发现:ngGridEventScroll,但是当使用ngGrid实习生滚动时,我只需触发,我需要页面滚动

  $scope.$on('ngGridEventScroll', function () {
        $scope.currentDataPosition++;
        $scope.setPagingData($scope.dataArray, $scope.currentDataPosition, $scope.pagingOptions.pageSize);
    });

因此,解决方案1打破了解决方案2,因为ngGridEventScroll不再具有实习生滚动.

 $scope.setPagingData = function (data, page, pageSize) {
        cfpLoadingBar.start();
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize, page * pageSize);
        $scope.totalServerItems = data.length;
        $scope.myData = pagedData;
        cfpLoadingBar.complete();
    };

 $scope.gridOptions = {
        data: 'myData',
        virtualizationThreshold: 50,
        enableRowSelection: …

我成功地从Controller返回数据

public function index()
 {
    $posts = Post::with('status' == 'verified)
                      ->paginate(30);

    return view ('show')->with(compact('posts'));
 }

此外,我在我的视图中成功显示了所有内容:

 <div id="content" class="col-md-10">
    @foreach (array_chunk($posts->all(), 3) as $row)
        <div class="post row">
            @foreach($row as $post)
                <div class="item col-md-4">
                    <!-- SHOW POST -->
                </div>
            @endforeach
        </div>
    @endforeach
    {!! $posts->render() !!}
 </div>

到目前为止,一切都很顺利.

但是,我根本没有得到官方文件.什么是' div.navigation'和' #content div.post'？我的情况应该是什么？

来自文档的片段:

$('#content').infinitescroll({

   navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be ?>hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2) …

Run Code Online (Sandbox Code Playgroud)

我创建了一个无限扩展FragmentPagerAdapter（在这个站点上有关于如何实现这一点的示例）。这允许我迭代 50 个（任意数量）52 个片段（每周一个）的集合，从而为用户提供无限的片段感觉。

通过调用在片段之间滚动/跳转时ViewPager.setCurrentItem，我看到了两种情况：

1. 无论哪种方式都只跳一个片段 - 一切正常。这大概是由于专门用于此用例的代码ViewPager.setCurrentItemInternal（查找以单词开头的注释We are doing a jump by more than one page）
2. 跳过一个以上的片段，只有setCurrentItem在smoothScroll设置为true(ie setCurrentItem(i, true))时调用，新的片段才会正确显示在屏幕上；否则会出现空白屏幕

据我所知，这可能是因为其中ViewPager.scrollToItem包含以下代码：

if (smoothScroll) {
    smoothScrollTo(destX, 0, velocity);
    if (dispatchSelected) {
        dispatchOnPageSelected(item);
    }
} else {
    if (dispatchSelected) {
        dispatchOnPageSelected(item);
    }
    completeScroll(false);
    scrollTo(destX, 0);
    pageScrolled(destX);
}

这是我超出我的深度的地方。为什么这if/else会导致我正在经历的现象？

我在我的应用程序中使用无限滚动,我想实现目前在指令中不支持的双向滚动效果.

我添加了滚动检测方法,可以找到滚动的向上/向下移动,因此我正在进行基于此的计算.我添加了translateY,因此可以轻松添加新元素并将其删除.

理想情况下,在向下移动时,应添加一个新元素,同时应移除向上的旧元素.

不知何故滚动不顺利发生,它会卡住.

所有元素都是动态的,可以有不同的高度.

更新了此方法

         handler = function() {

                var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll, currentPosition;
                currentPosition = container[0].scrollTop;
                (position === null) && (position = currentPosition);

if(currentPosition > position){
                    scrollPosition = 0;
                }else if(currentPosition === position){
                    scrollPosition = scrollPosition;
                }else{
                    scrollPosition = 1;
                }
                position = currentPosition;
                if(scrollPosition == null){
                    return;
                }


                //console.log('position', scrollPosition);
                if (container === windowElement) {
                    //console.log("windowElement");
                    containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
                    elementBottom = offsetTop(elem) + height(elem);
                    containerTopOffset = offsetTop(container);
                } else {
                    if(scrollPosition){ …

Run Code Online (Sandbox Code Playgroud)