jQuery 移动列表视图延迟加载

Question

如何在移动 jquery lisview 小部件中实现延迟加载？ 任何人都可以举一个使用json格式绑定到jquery mobile listview小部件的静态数据的例子吗？ 谢谢。

Answer 1

有几种方法，以下两种方法效果很好

JQM 方式，很棒的教程。它检测您何时滚动到列表视图的底部并加载更多项目到列表

http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/

演示

http://jsfiddle.net/Palestinian/pAgbT/light/

另一种方法是使用 Iscroll 5 插件。同样，您可以设置一个函数来检测您何时滚动到列表底部并加载新项目

http://iscrolljs.com/

演示我将整个 Iscroll 5 插入到演示中，所以向下滚动到 //// JQM STUFF 以查看实际代码

一些 JQM 代码（例如触发器创建）在 JQM 1.4 中已弃用，因此需要在 > 1.4 以上进行一些修改才能正常工作。

http://jsfiddle.net/t0t3Lz5x/

var myScroll;

 $(document).ready(function(){ 

        myScroll = new IScroll('#wrapper',
                        {
                            scrollX: false, 
                            scrollY: true
                            ,click:true // open click event
                            ,scrollbars: false 
                            ,useTransform: true
                            ,useTransition: false
                            ,probeType:3,
                            mouseWheel:true,
                            bindToWrapper: true
        });

});


 function initscroll() {

    setTimeout(function () {
            myScroll.refresh();
        }, 1000);
    }




        output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
 initscroll()   

myScroll.on('scrollEnd', function() {
if (this.y  == this.maxScrollY)

load_new_items();

});

function load_new_items() {

mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create'); 
$('#listview').listview().listview('refresh');
 initscroll()      

}

还有一种方法是使用 Jquery 的 on scroll 函数来监视列表的高度，然后在滚动时测量从列表顶部滚动的像素。当两者都匹配时，您可以运行一个函数来在列表中追加更多项目