标签: infinite-scroll

移动浏览器上的无限滚动

我正在尝试在我的网站上实现无限滚动,它在任何计算机上的浏览器上运行良好,但在移动浏览器上有问题。到目前为止,在 Chrome 上,如果我不放大或缩小,它可以正常工作,但一旦我以任何方式缩放,它就会停止工作。在 safari 上它根本不起作用。这是我正在使用的代码:

$(window).on('scroll', function (e) {
    console.log(" window.scrollTop = " + $(window).scrollTop() + " document.height=" + $(document).height() + " window.height =" + $(window).height());
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        load();
    }
});
Run Code Online (Sandbox Code Playgroud)

如果有人有任何建议,请告诉我。

javascript mobile infinite-scroll

5
推荐指数
1
解决办法
2913
查看次数

如何使用纯javascript在静态页面中制作无限页面滚动效果

我在网上搜索过,主要使用 jquery 和一些库来执行此操作。我想知道如何使用纯javascript来制作像twitter一样的无限页面滚动效果,而无需包含任何库(这里我放了搜索php和html代码供参考,我想在搜索结果中实现效果。我使用 laravel 作为后端)。我刚刚开始学习 javascript,请把我当作一个 10 岁的男孩。谢谢

//HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Risky Jobs - Search</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

   <div class="searchWrapper">
      <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method='get' >
        <input type="search" name="search">
      </form>
   </div>

   <h3>Risky Jobs - Search Results</h3>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

// PHP

function build_query($user_search, $sort){
    $search_query = "SELECT * FROM posts";

    $clean_search = str_replace(',',' ',$user_search);
    $search_words = explode(' ', $clean_search);
    //to  become a array

    $final_search_words = array();
    if(count($search_words) > 0){
        foreach($search_words as …
Run Code Online (Sandbox Code Playgroud)

html javascript php infinite-scroll

5
推荐指数
1
解决办法
1717
查看次数

使用 Meteor 无限滚动

我试图每次只加载 12 个项目,直到用户一直向下滚动并加载另外 12 个元素

由于某种原因我的代码不起作用。当我上传另一个项目时,我可以在管理面板中看到它,因此它已成功上传,但我在普通用户视图中看不到它。我只能查看前 12 个上传的项目,并且当我滚动时它不会加载更多项目。

这是我在客户端的代码

if (Meteor.isClient) {

    var ITEMS_INCREMENT = 12; //this one refers to the number of elements to load
    Session.setDefault('itemsLimit', ITEMS_INCREMENT);
    Deps.autorun(function() {
        Meteor.subscribe('items', Session.get('itemsLimit'));
    });

    Template.list_products.helpers({
        applications: function () {
            var limit = Session.get("itemsLimit");

            //return Products.find({}, { sort: {createdAt: -1},limit: limit }); // render latest first

            return Products.find({}, { sort: {createdAt: 1},limit: limit }); // render first first
        }
    });

    Template.list_products.moreResults = function() {
        // If, once the subscription is ready, we …
Run Code Online (Sandbox Code Playgroud)

scroll infinite-scroll meteor

5
推荐指数
1
解决办法
1960
查看次数

如何在nestedscrollview中使用无限滚动recyclerview?

屏幕的高度不够,因为一个屏幕上有很多包含两个回收站视图的项目。所以我试图在嵌套滚动视图中有一个子视图。但是,所有物品都一次装载,否则回收商不会回收。

所以我阅读了其他文章并尝试过,但它对我不起作用。

例如添加app:layout_behavior="@string/appbar_scrolling_view_behavior"mRecyclerView.setNestedScrollingEnabled(false);

如果你知道怎么做,请告诉我。谢谢阅读。

这是我的java代码

myDataset = new ArrayList<>();
    mRecyclerView = (RecyclerView) rootView.findViewById(R.id.map_recycler_view);
    LinearLayoutManager mLayoutManager = new LinearLayoutManager(mcontext);
    mLayoutManager.setAutoMeasureEnabled(true);
    mRecyclerView.setLayoutManager(mLayoutManager);
    mAdapter = new MyAdapter(this);
    mAdapter.setLinearLayoutManager(mLayoutManager);
    mAdapter.setRecyclerView(mRecyclerView);
    mRecyclerView.setAdapter(mAdapter);
Run Code Online (Sandbox Code Playgroud)

这是我的 xml 代码

<android.support.v4.widget.NestedScrollView
    android:id="@+id/nestedScrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="180dp">

            <fragment
                android:id="@+id/googleMap"
                android:name="com.google.android.gms.maps.SupportMapFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </FrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="vertical">



            <android.support.v7.widget.RecyclerView
                android:id="@+id/tag_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:descendantFocusability="blocksDescendants"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                app:layoutManager="LinearLayoutManager">

            </android.support.v7.widget.RecyclerView>

        </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <android.support.v7.widget.RecyclerView
                    android:id="@+id/map_recycler_view"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scrollbars="vertical"
                    android:nestedScrollingEnabled="false">
                </android.support.v7.widget.RecyclerView>

            </LinearLayout>

        </LinearLayout>

</android.support.v4.widget.NestedScrollView>
Run Code Online (Sandbox Code Playgroud)

这是我的适配器代码,太多了,所以我上传了相关部分,它在到达回收视图底部时添加了一个新项目。

public …
Run Code Online (Sandbox Code Playgroud)

android infinite-scroll android-recyclerview nestedscrollview

5
推荐指数
1
解决办法
2536
查看次数

NGX无限滚动不起作用

我想实现无限滚动,我正在使用 ngx-infinite-scroll,但没有触发 onScroll() 函数。我已经尝试了我在其他问题上看到的所有内容,但没有成功。我想将 ngx-infinite-scroll 与角度材料表一起使用。

 <div
  infiniteScroll 
  [infiniteScrollDistance]="2" 
  [infiniteScrollThrottle]="50" 
  (scrolled)="onScroll()">
</div>


onScroll() {
   console.log("Scroll...");
}
Run Code Online (Sandbox Code Playgroud)

infinite-scroll typescript angular angular5

5
推荐指数
1
解决办法
3425
查看次数

在 Flutter 中,如何制作一个顶部和底部无限的列表视图?

在 Flutter 中,如何制作一个顶部和底部无限的列表视图?

换句话说,无限滚动到负方向和正方向。

listview scroll infinite-scroll flutter

5
推荐指数
1
解决办法
6350
查看次数

如何使用 angular 5+ 的无限滚动?

我正在关注教程,但不确定它是否已过时。

我正在使用@angular/core": "^5.2.0"所以我正在使用这个版本 ngx-infinite-scroll@0.8.3

我已经添加了:

import { InfiniteScrollModule } from 'ngx-infinite-scroll';InfiniteScrollModule在 app.module.ts 中导入。

Search.component.ts我添加了directives: [InfiniteScroll]tp@Component但是当我在“ngx-infinite-scroll”中选择选项卡时它似乎不再存在,我可以看到InfiniteScrollDirective但没有实现它。

我可以让应用程序编译的唯一方法是摆脱directives: [InfiniteScroll]但无限滚动不起作用(它只是一个普通滚动)。

网址:

<div class="search-results"
     infiniteScroll
     [infiniteScrollDistance]="2"
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()">
  <div *ngFor="let name of ['a','a','b','e','r','t','t','e','b','e','r','t','ererer','a','a','b','e','r','t','t','e','b','e','r','t','ererer']">
    <div>
      {{name}}
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.search-results {
  height: 100px;
  overflow-y: scroll;
}
Run Code Online (Sandbox Code Playgroud)

我的问题是什么可以无限滚动?

html infinite-scroll angular

5
推荐指数
1
解决办法
5507
查看次数

Flutter 中的分页/无限滚动,带缓存和实时失效

我已经很久没有开始搜索 Flutter ListView 库,它可以让我以智能的方式使用分页。可悲的是,我没有找到任何符合我的标准的东西:

  1. 智能分页:库不应简单地逐页增加列表,而必须具有固定大小的缓存,该缓存仅加载和保留当前所需的页面。
  2. 异步加载:库应该基本上接受一个函数,该函数返回代表页面的列表的未来。
  3. 实时失效:Dart 有流,所以库应该以某种方式利用它们的能力来处理失效并在数据以反应方式发生变化时重新加载所需的一切。

基本上,我想要一些类似于标准 Android 库中的 PagedListAdapter + DataSource.Factory + LiveData 的东西。我想出了小部件PagedListView

import 'dart:math';

import 'package:fimber/fimber.dart';
import 'package:flutter/material.dart';

typedef Future<List<T>> PageFuture<T>(int pageIndex);

typedef Widget ItemBuilder<T>(BuildContext context, int index, T entry);
typedef Widget WaitBuilder(BuildContext context);
typedef Widget PlaceholderBuilder(BuildContext context);
typedef Widget EmptyResultBuilder(BuildContext context);
typedef Widget ErrorBuilder(BuildContext context);

class PagedListView<T> extends StatefulWidget {
  final int pageSize;
  final PageFuture<T> pageFuture;
  final Stream<int> countStream;

  final ItemBuilder<T> itemBuilder;
  final WaitBuilder waitBuilder;
  final PlaceholderBuilder placeholderBuilder;
  final …
Run Code Online (Sandbox Code Playgroud)

pagination caching reactive-programming infinite-scroll flutter

5
推荐指数
1
解决办法
5517
查看次数

关于 React.js 和 Material_ui 中的无限滚动

我正在使用react.js 进行项目

对于该项目,我应该包括像 Facebook 一样具有无限滚动功能的板

对此,我有一个问题。

当我滚动看板并回忆起更多帖子(例如 Facebook)时,它是否有效

是否仅在帖子底部绘制附加帖子或

它调用整个列表并重新绘制它

ex) case 1 :  {1,2,3} > scroll > {1,2,3} + {4,5} (additional posts)
    case 2 :  {1,2,3} > scroll > {1,2,3,4,5} (whole posts)
Run Code Online (Sandbox Code Playgroud)

如果我做案例1,我想要知道如何做。

谢谢!

javascript infinite-scroll reactjs material-ui

5
推荐指数
1
解决办法
2万
查看次数

双向无限垂直滚动视图(在顶部/底部动态添加项目),当您添加到列表开始时不会干扰滚动位置

我追求的是双向无限的垂直滚动视图:向上滚动到顶部或向下滚动到底部会导致动态添加更多项目。我遇到的几乎所有帮助都只与范围无限的底部有关。我确实遇到了这个相关的答案,但这不是我特别想要的(它根据持续时间自动添加项目,并且需要与方向按钮交互以指定滚动方式)。然而,这个不太相关的答案非常有帮助。根据那里提出的建议,我意识到我可以随时保留可见项目的记录,如果它们恰好是顶部/底部的 X 个位置,则在列表的开始/结束索引处插入一个项目。

另一个注意事项是我让列表从中间开始,因此除非您向上/向下移动 50%,否则无需添加任何内容。

明确地说,这是一个日历屏幕,我希望用户可以自由滚动到任何时间。

    struct TestInfinityList: View {
    
    @State var visibleItems: Set<Int> = []
    @State var items: [Int] = Array(0...20)
    
    var body: some View {
        ScrollViewReader { value in
        
            List(items, id: \.self) { item in
                VStack {
                    Text("Item \(item)")
                }.id(item)
                .onAppear {
                    self.visibleItems.insert(item)
                    
                    /// if this is the second item on the list, then time to add with a short delay
                    /// another item at the top
                    if items[1] == item {
                        DispatchQueue.main.asyncAfter(deadline: .now() …
Run Code Online (Sandbox Code Playgroud)

scrollview vertical-scroll ios infinite-scroll swiftui

5
推荐指数
1
解决办法
383
查看次数