标签: infinite-scroll

对我来说,在这里看到一个明确的解决方案可能只是为时已晚,但我想我会从任何有意见的人那里得到一些想法......

我正在处理的网站有很多用户帖子.当你到达或接近底部时,我已经让所有滚动事件处理程序在下一批100个帖子中工作到ajax.

我的问题是......我如何防止以下情况？

1. UserX访问该网站并加载帖子1-100
2. 另有10位用户访问该网站并添加10个帖子
3. UserX滚动到底部并加载帖子101-200,以前是帖子91-190
4. UserX最终会在页面上重复发布帖子91-100

我将在下面包含我的代码的精简版,以防它可以帮助其他任何人

$.ajax({
    type:'POST',
    url:"/userposts.php",
    data:{ limit: postCount },
    success:function(data) {
        $("postsContainer").append(data);
        if ( $("postsContainer").find("div[id='lastPostReached']") ) {
            // unbind infinite scrolling event handlers
        }
    },
    dataType:'html'
});

在我的PHP脚本中,我基本上有以下内容:

if ( ! isset($_POST["limit"]) ) {
    $sql .= " LIMIT 101"; // initial request
} else {
    $sql .= " LIMIT {$_POST["limit"]},101
}

$posts = mysql_query($sql);
while( $post = mysql_fetch_assoc($posts) ) {
    /* output formatted posts */
}

// inform callback handler to disable infinite scrolling …

我正在使用带有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 …

我正在创建一个带有无限滚动效果的简单列表视图.当我下载新数据时,我想在列表视图的底部显示一个不确定的进度条(如gmail app).

有2个解决方案

• 将进度条添加为listview的项目,但我不喜欢这个解决方案
• 在列表视图的底部添加进度条并显示/隐藏它

它会给出类似的东西

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <ListView
        android:id="@+id/List_list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:id="@+id/trobber"
        android:layout_below="@+id/List_list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true" >
    </ProgressBar>

</RelativeLayout>

但是当我的列表长度超过我的屏幕大小时(换句话说,当我必须scoll)时,不会显示进度条.

我正在开发一个角度应用程序,其中主页面加载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秒才能删除图像.看起来只有在获得所有图像时才加载角度.处理这个问题的最佳方法是什么？

谢谢!

我正在构建一个带有angularjs的应用程序,我已经实现了无限滚动技术,因为我有很多要展示的项目,所以这是一个比分页更好的体验,但是如果用户点击项目那么我有它的坏处是它会转到项目页面,但是当他想要回去时,他会在顶部,他应该继续滚动.这就是我想要完成的,如果他按下按钮他可以回到他所在的位置!

上市物品:

<div class="container" id="infinit-container" ng-controller="ArticlesController">

    <div id="fixed" when-scrolled="LoadMore()">
        <div ng-repeat="article in Articles">
            <article-post article="article"></article-post>
        </div>
    </div>
</div>

这是when-scrolled指令

app.directive('whenScrolled', function () {
return function (scope, element, attrs) {
    $('#fixed').height($(window).height());
        var div = element[0];
        element.bind('scroll', function () {
            if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
                scope.$apply(attrs.whenScrolled);

            }
        })
    }
})

那就是控制器

app.controller('ArticlesController', function ($scope, UserService) {
  $scope.Articles = [];

  var page = 0;
  $scope.LoadMore = function () {
    UserService.Articles(page)
      .success(function (data) {
        $scope.Articles.push.apply($scope.Articles, data);
      });
    page++;

  };
  $scope.LoadMore();
});

使用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)

我试图用来paginate()实现无限滚动.我认为最简单的方法是使用'无限滚动'来实现这一目标.如果你有任何其他的建议怎么做没有无限滚动库,只使用jQuery,我很高兴知道..

我返回变量来查看如下:

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>

Javascript部分:

$(document).ready(function() {
  (function() {
     var loading_options = {
        finishedMsg: "<div class='end-msg'>End of content!</div>",
        msgText: "<div class='center'>Loading news items...</div>",
        img: "/assets/img/ajax-loader.gif"
     };

     $('#content').infinitescroll({
         loading: loading_options,
         navSelector: "ul.pagination",
         nextSelector: "ul.pagination  li:last a",   // …

我正在使用React,下面是我用来实现无限滚动功能的代码.

componentDidMount() {
    // Flag to check if the content has loaded.
    let flag = true;

    function infiniteScroll() {
      let enterpriseWrap = $('.enterprise-blocks');
      let contentHeight = enterpriseWrap.offsetHeight;
      let yOffset = window.pageYOffset;
      let y = yOffset + window.innerHeight;

      console.log('hey');

      if(this.props.hasMore) {

        if(y >= contentHeight && flag) {
          flag = false;

          this.props.loadMoreVendors(function() {
            flag = true;
          });

        }

      } else {
        window.removeEventListener('scroll', infiniteScroll.bind(this));
      }
    }

    window.addEventListener('scroll', infiniteScroll.bind(this));
  }

我实际上想要在加载所有项目后取消绑定滚动事件,但removeEventListener不起作用.难道我做错了什么？

我正在拼命尝试使用kotlin在Android应用程序上实现无休止的滚动.所有教程都没用,因为他们没有正确解释事情.例如:https: //github.com/chetdeva/recyclerview-bindings

它看起来很有前途,但作者使用"把它放在你的BindingAdapter中"之类的短语,所以我看看这BindingAdapter是什么,我找到了一个java文件但是如果你在那里插入任何东西我会得到错误.就像我尝试的任何东西都直接失败.

其他教程是用java编写的,甚至用"translate to kotlin"选项也没用,因为翻译后的代码会抛出100个错误.

我尝试过这样的事情:

setContentView(R.layout.activity_main)
    list.layoutManager = LinearLayoutManager(this)
    list.hasFixedSize()
    list.adapter = ListAdapter(this, getLists())
    val list_view: RecyclerView = findViewById(R.id.list)
    fun setRecyclerViewScrollListener() {
        list_view.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
                val height = list_view.getHeight()

                val diff = height-dy
                if (diff < 1000){
                    /*load next list */
                }
            }
        })
    }
    setRecyclerViewScrollListener()
}

或这个

val inflater = LayoutInflater.from(this@MainActivity)
val layout = inflater.inflate(R.layout.append_list, null, false)
button.setOnClickListener{screen.addView(layout)}

有没有防弹方法,你可以简单地追加像html和js的元素？我在2分钟内写了这个片段.在Android/Kotlin中有类似的"简单"方式吗？

$("#next").click(function(){
  $(".append_text").append("new text <img …