标签: infinite-scroll

我正在使用wordpress的网站上工作,我几乎每天发帖子,现在的问题是帖子列表有点长,我希望有以下内容:每发布一次xx(数量)后出现按钮,可以加载下一个xx(数量)帖子.

我已经尝试构建无限滚动javascript(在代码和插件本身),但我似乎无法使它按我想要的方式工作.

我希望有人可以帮我解决这个问题.

我在我的网站上使用ng-infinite-scroll Angular 指令，它总体上运行良好。然而，在测试时我注意到如果我快速滚动页面会跳回到顶部。下面是我的 html 和我的滚动功能。我认为问题在于如何$scope.busy处理：

html：

<div class="row inner" infinite-scroll="loadImages()" infinite-scroll-distance="1" infinite-scroll-disabled="busy">

  <h2 class="headline">{{event}}</h2>
  <h3 class="headline">{{city}}, {{state}}</h3>

  <div class="col-md-3 col-sm-4 col-xs-12 img-container" ng-repeat="photo in photos">

    <a ng-href="{{photo.link}}" target="_blank" title="{{photo.text}}"><img ng-src="{{photo.img}}" onerror="imgError(this);" alt="" class="img-responsive insta" id="image"></a>

    <div class="prof-circ" title="{{photo.username}}"><a ng-href="http://instagram.com/{{photo.username}}" target="_blank"><img ng-src="{{photo.profile}}" onerror="anonImg(this);" alt="" class="circular"></a></div>

</div>

控制器代码：

$scope.loadImages = function() {

    if ($scope.busy) return;
    $scope.busy = true;
    $scope.limit += 20;

    Events.get($scope.id,$scope.limit).success(function(response) {
        $scope.photos = response.photos.reverse();
        $scope.busy = false;
    });
}

在添加 viewmodel 和 livedata 之前，我通过改造成功实现了无限滚动。但是在使用 Retrofit 添加 viewmodel 和 livedata 后，我无法使用新数据调用更新 recyclerview 或 viewmodel 观察者不更新列表。

我只是想像我之前的代码那样无限滚动。我添加了一个全局变量来重用下一页令牌。我是否缺少任何东西或任何示例来实现具有视图模型和改造的无限回收器视图将很棒。

public static String NEXT_PAGE_URL = null;

我是这样编码的。

我的活动 -> PlaceListActivity

placeRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            LogMe.d(tag, "onScrollStateChanged:: " + "called");
            // check scrolling started or not
            if (newState == AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL) {
                isScrolling = true;
            }
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            LogMe.d(tag, "onScrolled:: " + "called");
            super.onScrolled(recyclerView, dx, dy);

            currentItem = …

我正在使用：https : //infinite-scroll.com并遇到一个我无法解决的问题。

无限滚动效果很好，这是我的初始化：

var $container = $('.parent').infiniteScroll({
  path: '.nav-prev a',
  append: '.article',
    status: '.scroller-status',
  hideNav: '.navigation-index',
});     

加载第一页后，它会破坏我的其他 JS。即我在“文章”上有一个点击功能

    $(".article").click(function(){
        $(".hidden").hide("fast");
        $(this).next('.hidden').slideToggle("fast");
    });

滚动开始后，这将停止工作。

我尝试了各种事情，例如：

var $container = $('.parent').infiniteScroll({
    $(".article").click(function(){
    $(".hidden").hide("fast");
    $(this).next('.hidden').slideToggle("fast");
    });
});

但我就是无法让它使用我的 JS。我知道我错过了什么？

我必须使用 graphql 查询，并且逐页获取数据。所以我需要在列表视图生成器中无限滚动，但我不知道如何在页面中添加 num 。有人可以帮我吗？

这是我的查询：

query homeview(\$moreId: ID!, \$page: Int! ){
    homeview(HM_ID: \$moreId, page: \$page){
    HM_ID
    HM_Type_ID
    HM_Type_Name 
  }
}
""";

这是我传递 int 数字的变量page： dynamic pageNum = 0;

这是控制器：

 ScrollController _scrollController = new ScrollController(  initialScrollOffset: 10, 

这是我的列表视图生成器：

   class MoreEpd extends StatefulWidget {
  final String moreId;
  const MoreEpd({Key? key, required this.moreId}) : super(key: key);

  @override
  _MoreEpdState createState() => _MoreEpdState();
}

class _MoreEpdState extends State<MoreEpd> {
  double pageWidth = 0;
  double pageHeigh = 0;
  dynamic pageNum = 0;

  final …

我是 React 新手，所以我想知道。我正在创建这个包含 200 多个项目数组的组件，并且我不想立即渲染这些项目，这就是我使用无限滚动功能的原因，以便当用户接近列表末尾时渲染新项目。但是，当由于状态更改而发生这种情况时，以前的项目也会重新渲染，因为创建了新的对象数组。是否有某种方法可以对此进行优化，以便仅渲染新项目而前一个项目保持不变？

这是我的组件，它使用无限滚动并显示项目：

import styles from "./CountriesSection.module.css";
import { useEffect, useMemo, useRef, useState } from "react";
import { useInfinityScroll } from "../hooks/useInfinityScroll";
import CountriesList from "./CountriesList";

const data = new Array(240).fill({});

const CountriesSection = () => {
  const [currentItemsDisplayed, setCurrentItemsDisplayed] = useState(40);

  const componentsToShow = useMemo(() => {
    return data.slice(0, currentItemsDisplayed);
  }, [currentItemsDisplayed]);

  const divRef = useRef(null);
  let isVisible = useInfinityScroll(divRef);

  useEffect(() => {
    if (!isVisible) return;
    setCurrentItemsDisplayed((prevVal) => prevVal + 20);
  }, [isVisible]);

  return (
    <> …

我正在用来com.google.accompanist:accompanist-pager实现页面的无限滚动。我按照 Horizo​​ntalPagerLoopingSample 中的描述实现了所有内容。我需要从第三页开始显示我的寻呼机。但是当我设置initialPage = 2 Horizo​​ntalPager 显示错误的页面。在示例中设置显示第一页initalPage = Int.MAX_VALUE / 2。是否可以用无限寻呼机计算真实的具体位置？

我尝试做这样的事情：

val positionFromIWantToStart = 2
 val startIndex = (Int.MAX_VALUE / 2) + positionFromIWantToStart
 val pagerState = rememberPagerState(initialPage = startIndex)

但这工作不正确，HorizontalPager总是显示第一页。

请帮我。

我有一个jquery脚本正确加载无限滚动设置的新页面.我想要做的是这样当你说距离底部300px时,它会加载更多.我现在能够做到这一点,但遗憾的是滚动寄存器多次,ajax加载页面的其余部分.我试过setTimeout无济于事.

        (function(){

            //inner functions will be aware of this
            var currentPage = 1;

                $(window).scroll(function() {

                if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {

                    $.ajax({
                        type: "GET",
                        url: "posts/page/" + currentPage,
                        data: "",
                        success: function(results){
                            $(".container").append(results).masonry('reload');
                        }
                    })
                    setTimeout(currentPage++,3000);

                }

            });

        })();

在我的页面上,我有一个包含项目的列表,您可以单击"查看更多"按钮,该按钮显示有关此主题的更多信息.此单击函数位于另一页的jQuery中.我在这个页面上实现了一个无限卷轴,但是现在按钮"查看更多"对新元素不起作用,只对第一个元素起作用.

仅供参考:我没有编写这个应用程序,我的任务只是添加无限滚动.

我在网上搜索过这个问题,我读过几次这可能是因为新元素没有初始化或者其他东西.但我从未发现如何解决这个问题.

这是无限卷轴的代码:

var reachEnd = false;

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            lastPostFunc();
    }
});

function lastPostFunc() {

    var trs = $('.sresult-row'); /*get the number of trs*/
    var count = trs.length; /*this will work as the offset*/

    /*Restricting the request if the end is reached.*/
    if (reachedEnd == false) {
        $.ajax({
            url: "http://localhost:8080/jingjobs/index.php/search/ajax_searchJob/" + count,
            async: false,
            dataType: "html",
            success: function(data) {
                if (data != "End")
                    $('.result-bd').append(data);
                else
                    reachedEnd = true;
            }
        });
    }
} …

我正在使用Firebase/AngularFire构建一个Ionic App.我面临着一个棘手的问题:我希望我的ng-repeat能够更好地进行性能优化.我听说最好的方法就是无限滚动.我使用AngularFire在服务/工厂中获取所有数据 - 更具体地说,$ firebaseArray.

我谷歌发现了这个:http://firebase.github.io/firebase-util/#/toolbox/Paginate/example/ionic

问题1:使用Firebase util库的无限滚动是无限滚动服务器端无限滚动还是客户端？这个库是否解决了ng-repeat的性能问题,如下所述:(http://www.alexkras.com/11-tips-to-improve-angularjs-performance/)

问题2:我的firebaseArray实际上需要命令动态计算一个名为distance的变量.我是否仍可以在安全规则中使用.indexOn规则来提高查询性能？(声音不可能,因为距离最初没有存放在火场中)

这是我的代码:我的工厂:taskService.js

    var ref = new Firebase(FirebaseUrl);
    var tasks = $firebaseArray(ref.child('tasks'));
    var Task = {
        all: tasks,
        getAllTasks: function() {
            if (tasks.length == 0) {
                tasks = $firebaseArray(ref.child('tasks'));
            } else {   
                tasks = tasks;
            }
            return tasks;
        },
     }

我的ng-repeat视图控制器:

    $scope.tasks = taskService.getAllTasks();
    $scope.tasks.$loaded().then(function(data){
            calculateDistance($scope.tasks, $scope.userCurrentLocation);  
    });
    var unwatch = $scope.tasks.$watch(function(event) {
          calculateDistance($scope.tasks, $scope.userCurrentLocation);
        });
    $scope.$on('$ionicView.leave', function(){
          // Anything you can think of
          unwatch();
        });
    }
    //--------------GeoLocation …