我正在尝试在我的网站上实现无限滚动,它在任何计算机上的浏览器上运行良好,但在移动浏览器上有问题。到目前为止,在 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)
如果有人有任何建议,请告诉我。
我在网上搜索过,主要使用 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) 我试图每次只加载 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) 屏幕的高度不够,因为一个屏幕上有很多包含两个回收站视图的项目。所以我试图在嵌套滚动视图中有一个子视图。但是,所有物品都一次装载,否则回收商不会回收。
所以我阅读了其他文章并尝试过,但它对我不起作用。
例如添加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
我想实现无限滚动,我正在使用 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) 在 Flutter 中,如何制作一个顶部和底部无限的列表视图?
换句话说,无限滚动到负方向和正方向。
我正在关注本教程,但不确定它是否已过时。
我正在使用@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)
我的问题是什么可以无限滚动?
我已经很久没有开始搜索 Flutter ListView 库,它可以让我以智能的方式使用分页。可悲的是,我没有找到任何符合我的标准的东西:
基本上,我想要一些类似于标准 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
我正在使用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,我想要知道如何做。
谢谢!
我追求的是双向无限的垂直滚动视图:向上滚动到顶部或向下滚动到底部会导致动态添加更多项目。我遇到的几乎所有帮助都只与范围无限的底部有关。我确实遇到了这个相关的答案,但这不是我特别想要的(它根据持续时间自动添加项目,并且需要与方向按钮交互以指定滚动方式)。然而,这个不太相关的答案非常有帮助。根据那里提出的建议,我意识到我可以随时保留可见项目的记录,如果它们恰好是顶部/底部的 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) infinite-scroll ×10
javascript ×3
angular ×2
flutter ×2
html ×2
scroll ×2
android ×1
angular5 ×1
caching ×1
ios ×1
listview ×1
material-ui ×1
meteor ×1
mobile ×1
pagination ×1
php ×1
reactjs ×1
scrollview ×1
swiftui ×1
typescript ×1