jQuery移动列表浏览延迟加载

Question

如何在移动jquery lisview小部件中实现延迟加载？任何人都可以使用json格式的静态数据绑定到jquery移动列表视图小部件吗？谢谢.

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的滚动 功能来监视列表的高度,然后在滚动测量从列表顶部滚动的像素时.当两者匹配时,您可以运行一个函数来在列表中追加更多项目