jQuery移动列表视图延迟加载

Question

如何在移动jquery小部件中实现延迟加载？有人能给出一个示例，使用json格式的静态数据绑定到jquery移动listview小部件吗？谢谢。

Answer 1

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

JQM，一个很棒的教程。当您滚动到listview的底部并加载更多要列出的项时，它会检测到。

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

Demo

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

另一种方法是使用Iscroll 5封堵。类似地，您可以设置一个函数，以便在滚动到列表底部并加载新项时检测到。

http://iscrolljs.com/

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

一些JQM代码(例如触发器创建)在jqm1.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滚动函数来监视列表的高度，然后滚动测量从列表顶部滚动的像素。当两者匹配时，可以运行一个函数来追加列表中的更多项。