Yii 中的无限滚动答案

【问题标题】：Infinite Scrolling in YiiYii 中的无限滚动
【发布时间】：2014-06-06 20:23:40
【问题描述】：

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

我查看了 Yiinfinite-scroller，但它附加到列表的末尾，形成了一个非常长的列表，这正在占用我的内存。

谢谢

【问题讨论】：

标签： php javascript pagination yii

【解决方案1】：

实际上只需要几行js和jQuery的帮助就可以很容易地实现无限滚动。测量内容 div 的高度，并在页面滚动时从 div 高度减去滚动差异，然后当它达到最小量时，查询更多内容并重置高度计数器并重复：

<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>

【讨论】：

如果出现以下情况，用 '
'+$('#infscroll').html()+data.result+'
' 替换可能是个好主意您希望之前的结果继续显示。