javascript – 如何实现jScroll？

我是JS& jQuery所以请跟我一起.

我试图创建动态列表< ul>使用JS,最后它的工作.现在我需要在列表中实现无限滚动概念,使用jScroll 插件.

所以我研究了很多关于jScroll,但我找不到任何我需要的教程.大部分使用PHP语言的教程很多,而在我的情况下,我已经使用简单的SELECT查询(LIMIT和OFFSET)完成了我的服务器(PHP)代码,并返回一个json.

这是我的jQuery / AJAX代码,从数据库创建动态列表,它已经工作：

$.ajax({
    url: "http://localhost/jwmws/index.PHP/jwm/search/msmall/"+keyword,//This is the current doc
    type: "GET",error : function(jq,st,err) {
        alert(st + " : " + err);
    },success: function(result){
        //generate search result
        //float:left untuk hack design
        $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>'
            + '<br/>'
            + '<p>Found ' + result.length + ' results</p>');

        if(result.length == 0)
        {
            //temp
            alert("not found");
        }
        else{
            for(var i = 0; i < result.length; i++)
            {
                //generate <li>
                $('#list').append('<li class="Box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');
            }

            var i=0;
            $(".Box").each(function(){
                var name,address,picture = "";
                if(i < result.length)
                {
                    name = result[i].name;
                    address = result[i].address;
                    picture = result[i].Boxpicture;
                }

                $(this).find(".name").html(name);
                $(this).find(".address").html(address);
                $(this).find(".picture").attr("src",picture);
                i++;
            });
        }
    }
});

因为我的动态列表已经在运行,现在我只需要实现jScroll.但是,我不明白其代码,如：

$('.infinite-scroll').jscroll({
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',padding: 20,nextSelector: 'a.jscroll-next:last',contentSelector: 'li'
});

在我的情况下如何实现？我只是追加< li>在我的jQUery / AJAX中,nextSelector怎么样？

任何帮助不胜感激,请问您是否有问题.

谢谢你的帮助：D

解决方法

你把每一件事情都设置好,只需要在适当的时候调用jscroll.

$.ajax({
        url: "http://localhost/jwmws/index.PHP/jwm/search/msmall/"+keyword,//This is the current doc
        type: "GET",err) {
            alert(st + " : " + err);
        },success: function(result){
            //generate search result
            //float:left untuk hack design
            $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>'
                            + '<br/>' 
                            + '<p>Found ' + result.length + ' results</p>');

            if(result.length == 0)
            {
                //temp
                alert("not found");
            }
            else{
                for(var i = 0; i < result.length; i++)
                {
                    //generate <li>
                    $('#list').append('<li class="Box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');
                }
                //After generation of <li> put a next link
                $('#list').append('<a href="#" class="jscroll-next">NEXT</a>');
                //call to jscroller to be triggered
                jscroller();
                var i=0;
                $(".Box").each(function(){
                    var name,picture = "";
                    if(i < result.length)
                    {
                        name = result[i].name;
                        address = result[i].address;
                        picture = result[i].Boxpicture;
                    }

                    $(this).find(".name").html(name);
                    $(this).find(".address").html(address);
                    $(this).find(".picture").attr("src",picture);
                    i++;
                });
            }
        }
        });

//The function to be called when <li> are rendered.
function jscroller(){
 $('.infinite-scroll').jscroll({
     loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',contentSelector: 'li'
 });
}

javascript – 如何实现jScroll？

解决方法

猜你在找的JavaScript相关文章