我有很多内容要在网站上显示,这样我需要使用"无限"滚动解决方案,当用户滚动到当前加载内容的末尾时加载内容.但是,我确切知道有多少数据,我希望用户对此有所了解.我不喜欢滚动条使得它看起来几乎到了内容的末尾,然后突然加载更多内容并且拇指/滑块位于滚动轨道的中间并且更窄.

我计划的解决方案是在当前内容很大但是为空的情况下创建一个div,然后在加载更多内容时缩小它.有更好的想法吗？

如Google所述,Gallery类在API级别16中已弃用.不再支持此小部件.其他水平滚动小部件包括支持库中的Horizo​​ntalScrollView和ViewPager.所以我使用ViewPager作为Gallery类的替代品.

我的目标是最终实现带有文本描述的无限滚动图像ViewPager.我使用下面的代码来实现图像ViewPager,其中包含描述每个图像的文本但是如何将无限滚动应用于ViewPager？

我之前没有使用过ViewPager,请尽量提供详细的代码.

activity_main.xml中:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:orientation="vertical">
  <android.support.v4.view.ViewPager 
       android:id="@+id/myimagepager" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" /> 
</LinearLayout>

custom_pager.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:orientation="vertical"  
   android:gravity="center_horizontal">
   <ImageView 
       android:id="@+id/myimage" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_margin="5dp" 
       android:layout_weight="2" /> 
    <TextView 
       android:id="@+id/image_text" 
       android:layout_width="fill_parent" 
       android:layout_height="0dp"   
       android:layout_weight="1"/>

</LinearLayout>

ImagePager:

public class ImagePager extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImagePagerAdapter adapter = new ImagePagerAdapter(this, imageArra, stringArray );
        ViewPager myPager = (ViewPager) findViewById(R.id.myimagepager);
        myPager.setAdapter(adapter);
        myPager.setCurrentItem(0);
    }

    private int imageArra[] = { R.drawable.a, R.drawable.b,R.drawable.c, 
                                 R.drawable.d,R.drawable.e,R.drawable.f,
                                 R.drawable.g, …

我有一个类似于iOS日历的月视图,并且UICollectionView使用了一个.现在,实现无限滚动行为会很有趣,这样用户可以在每个方向上垂直滚动,它永远不会结束.现在的问题是如何以有效的方式实施这种行为？这是我现在发现的:

基本上,您可以检查是否到达当前滚动视图的末尾.您可以在里面scrollViewDidScroll:或里面查看collectionView:cellForItemAtIndexPath:.将另一个内容添加到数据源会很简单,但我认为还有更多内容.如果您只添加数据,则只能向下滚动.用户应该能够向两个方向滚动(向上,向下).不知道是否reloadData会这样做.也contentOffset将改变,不应该有跳跃行为.

另一种可能性是使用WWDC 2011的Advanced ScrollView Techniques中显示的方法.这里用于设置到中心,子视图的帧被调整到距离中心相同的距离.如果我没有部分,这种方法可以正常工作.如何使用部分？layoutSubviewscontentOffsetUIScrollView

我不想使用高值的部分来伪造无限滚动,因为用户会找到结束.我也不使用任何分页.

那么如何为集合视图实现无限滚动？

编辑:

现在我尝试增​​加部分的数量,如果我到达结束UICollectionView.要显示新部分,必须调用reloadData.在调用此方法时,所有当前可用部分的所有计算都将再次完成!滚动浏览集合视图时,此性能问题会导致严重的断断续续,如果向下滚动,则会变得越来越慢.不知道是否可以在后台线程上转移这项工作.通过这种方法,如果您进行了所需的调整,可以向上和向下滚动.

赏金:

现在,我正在为回答这个问题提供赏金.我对如何实现iOS日历的月视图感兴趣.详细介绍无限滚动的工作原理.它在两个方向上工作(向上,向下),它永远不会结束(真正的无限 - 不重复).也没有任何延迟(即使在iPhone 4上).我想使用UICollectionView和数据由不同的部分组成,每个部分有不同数量的项目.必须做一些计算才能得到下一部分.我不需要日历部分 - 只有部分中不同项目的无限滚动行为.随意提问.

添加部分:

public override void Scrolled(UIScrollView scrollView)
{
    NSIndexPath[] currentIndexPaths = currentVisibleIndexPaths();

    // if we are at the top
    if (currentIndexPaths.First().Section == 0)
    {
        NSIndexPath oldIndexPath = NSIndexPath.FromItemSection(0, 0);
        UICollectionViewLayoutAttributes attributes_before = this.controller.CollectionView.GetLayoutAttributesForItem(oldIndexPath);
        CGRect before = attributes_before.Frame;
        CGPoint contentOffset = this.controller.CollectionView.ContentOffset;
        this.controller.CollectionView.PerformBatchUpdatesAsync(delegate …

我正在Elm中构建一个简单的应用程序,只显示一个在另一个下面的div列表,我想添加无限滚动功能,每次页面的最后一个div出现在视口中时添加新内容.

在Elm中有没有办法知道div何时出现在视口中？作为替代方案,有一种方法可以跟踪鼠标滚动事件作为信号吗？

砌体无限滚动追加html5视频重叠

我目前正在使用imagesLoaded库来检查图像是否已加载然后调用masonry.

但它没有使用html5视频标签,因为这些视频相互重叠.

所以我改变调用masonry从document.ready到window.load并删除呼叫imagesLoaded从此即在初始加载

$(document).ready(function(){

    var $container = $('#media');
    // layout Masonry again after all images have loaded
    $container.imagesLoaded( function() {

      $container.masonry({
          "columnWidth": "." + "col-sm-2",
          itemSelector: '.item',
          gutter: 0,
        });
      $('.item').css('opacity', '1.0');
    });

});

对此

$(window).load(function(){
        var $container = $('#media');

          $container.masonry({
              "columnWidth": "." + "col-sm-2",
              itemSelector: '.item',
              gutter: 0,
            });
          $('.item').css('opacity', '1.0');
});

现在html5 videos在masonry重叠,并在页面的第一次加载完美渲染initial load,但是,因为我也使用在滚动页面上infinite-scroll添加更多images/videos,所以当新视频被添加到容器时它们正在重叠,这种行为是由早期引起的masonry …

我尝试过使用ngx-infinite-scroll(https://www.npmjs.com/package/angular2-infinite-scroll)以及其他一些指令,但似乎都没有.

的package.json

"dependencies": {
"@angular/animations": "^4.0.2",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.2",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.2",
"@angular/router": "^4.0.0",
"absurd": "^0.3.8",
"angular2-masonry": "^0.4.0",
"animate.css": "^3.5.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"jquery-slimscroll": "^1.3.8",
"metismenu": "^2.7.0",
"ng2-bs3-modal": "^0.10.4",
"ngx-infinite-scroll": "^0.5.1",
"rxjs": "^5.1.0"
}

user.component.html

<div class="row" infiniteScroll [infiniteScrollDistance]="0" 
  [infiniteScrollThrottle]="300" (scrolled)="loadMore()">
   <div class="col-md-3 col-sm-4" *ngFor="let user of userList">
     <span>{{user.name}} ({{user.email}})</span>
   </div>
</div>

user.module.ts

导入完成

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

@NgModule({ …

我正在制作一个无限滚动的网站.也就是说,当用户滚动到页面的底部时,新的内容块被附加到底部.它与Facebook非常相似.这是一个加载3页的例子:

 _________
|         |
|    0    |
|_________|
|         |
|    1    |
|_________|
|         |
|    2    |
|_________|

当用户点击最后一页上的内容时,我会将它们带到单独的详细信息页面.但是,如果用户点击回搜索结果页面,我没有他们以前位置的记忆,必须再次加载第0页.

 _________
|         |
|    0    |
|_________|

我知道一些老式的方法可以解决这个问题,但每个方法都有一些严重的问题:

哈希网址

每次加载新页面时我都可以更新URL.例如:www.website.com/page#2.当用户进入详细页面并返回时,URL会告诉我最后加载的页面,所以我为他加载:

 _________
|         |
|    2    |
|_________|

但这是糟糕的用户体验.仅加载第2页.用户无法向上滚动以查看较旧的内容.我不能只加载页面0,1和2,因为这会使服务器超载,因为后退按钮占网络流量的50%(Jacob Nielsen研究).

本地存储

Cookie没有存储许多页面数据的存储容量.本地存储应该有足够的空间.一种想法是将所有加载的页面存储到本地存储中.当用户返回搜索结果时,我从本地存储加载而不是命中服务器.这种方法的问题在于我的大部分用户都使用不支持本地存储的浏览器(IE7).

我在这里看到了一些关于这个主题的帖子,但是找不到一个能够解决我试图处理的问题的帖子.

在我的网站上,我有一些博客帖子.我已经设置了infiniteScroll(https://github.com/paulirish/infinite-scroll),它可以正常加载滚动操作触发的下一页内容.我已经设置我的div水平滚动但我无法弄清楚如何修改infiniteScroll脚本(和local.js脚本)由水平滚动而不是垂直滚动触发.

以下是进度:https://adrtimesv6.squarespace.com/library/(您必须输入访问者访问验证码才能在构建时查看).

任何帮助将不胜感激!!我一直在修补和狩猎互联网几天,试图让这个工作....

我的html结构是这样的:

<div class="listWrapper">
    <div id="scroller">
        <article class="item"></article>
        <article class="item"></article>
        ... and so on
    </div>
</div>

我的脚本看起来像这样:

$('#scroller').infinitescroll({
    behavior: 'local',
    binder: $('#scroller'),
    nextSelector: ".pagination .nextPage",
    navSelector: ".pagination",
    itemSelector: ".item",
    animate: false,
    extraScrollPx: 0,
    bufferPx: 235,
    pixelsFromNavToRight: undefined,
});

我修改了infiniteScroll js文件,将所有高度引用更改为宽度,从上到下,从下到右:

;
(function ($) {
    $.fn.infinitescroll = function (options, callback) {
        function debug() {
            if (opts.debug) {
                window.console && console.log.call(console, arguments)
            }
        }

        function areSelectorsValid(opts) {
            for (var key in …

我正在使用infinitescroll.js脚本,它的效果非常好.我已经找到了如何使用以下代码替换默认功能和更多加载按钮:

$(window).unbind('.infscr');
$('.js-next-reports').click(function() {
    $grid.infinitescroll('retrieve');
    return false;
});
$(document).ajaxError(function(e, xhr, opt) {
    if (xhr.status == 404) $('.js-next-reports').remove();
});

但是,我想要做的是允许无限滚动运行3/4次然后显示.js-next-reports按钮.我不知道如何跟踪无限卷轴运行了多少次.我知道有一个currPagevar但是使用console.log我无法弄清楚我是如何引用它的.

maxPageinfinitescroll 还有一个选项,它限制它只运行X次,所以我可能会以某种方式进入？我不知道如何获得一个console.log的选项.这是我的初始化代码,如果这有帮助($ grid只是一个div的参考)

$grid.infinitescroll({

    // selector for the paged navigation (it will be hidden)
    navSelector  : ".pagination",
    // selector for the NEXT link (to page 2)
    nextSelector : ".pagination .next",
    // selector for all items you'll retrieve
    itemSelector : ".infinite-scroll-post",
    contentSelector : "#infinite-scrollable",
    debug: true,

    // finished message
    loading: {
        img: "ajax-loader.gif", …

我想知道tableview是否有任何内置函数来添加无限滚动/分页.

现在我的VC看起来像这样:

var data: JSON! = []

override func viewDidLoad() {
    super.viewDidLoad()

    //Init start height of cell
    self.tableView.estimatedRowHeight = 122
    self.tableView.rowHeight = UITableViewAutomaticDimension

    self.tableView.delegate = self
    self.tableView.dataSource = self

    savedLoader.startAnimation()
    //Load first page
    loadSaved(1)

}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data.count
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCellWithIdentifier("aCell") as! SavedTableViewCell

    let info = data[indexPath.row]
    cell.configureWithData(info)

    return cell
}

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    performSegueWithIdentifier("WebSegue", sender: indexPath) …