Question

如何在移动jquery listview小部件中实现延迟加载？任何人都可以使用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中被折旧，因此需要在＆gt;之上进行一些修改。 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的滚动功能来监控列表的高度，然后滚动测量从列表顶部滚动的像素。当两者匹配时，您可以运行一个函数来在列表中追加更多项目

jQuery mobile listview延迟加载

1 个答案: