在 Yii 中无限滚动 - Infinite Scrolling in Yii

Infinite Scrolling in Yii

本文关键字：滚动无限 Yii | 更新日期: 2023-09-27

我正在寻找一种解决方案，在Yii的列表视图中显示许多项目（数千个）。我希望能够在连续滚动的列表中显示它们。这是一个问题，当用户滚动到列表末尾时，我希望新数据替换他刚刚滚动传递的数据。有点像谷歌音乐，如果你有一个很长的播放列表。

我看了Yiinfinite-scroller，但它附加到列表的末尾，形成了一个很长的列表，这正在扼杀我的内存使用量。

谢谢

实际上，在

jQuery的帮助下，只需几行js即可实现无限滚动。测量内容div的高度，当页面滚动时，从divs高度中减去滚动差异，然后当它达到最小数量时，查询更多内容并重置高度计数器并重复：

<script type="text/javascript">
var contentHeight = 4000,;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 1;
function scroll(){
    if(navigator.appName == "Microsoft Internet Explorer")
        scrollPosition = document.documentElement.scrollTop;
    else
        scrollPosition = window.pageYOffset;
    if((contentHeight - pageHeight - scrollPosition) < 500){
        $.ajax({ url: "./yourAPI/?next="+n, cache: false,
        success: function(data){
            //append result
            $('#infscroll').append('<div>'+data.result+'</div>');
        }, dataType: "json"});
        n += 1;
        contentHeight += 4000;
    }
}
$(document).scroll(function(){
    setInterval('scroll();', 250);
});
</script>
<div id="infscroll"></div>