如何实现jScroll？

问题描述

我是个初学者JS＆放大器; jQuery的，所以请多多包涵。

Im a beginner in JS & jQuery so please bear with me.

我试着去建立一个动态列表＆LT; UL＆GT; 使用JS和最后的工作。现在我需要实现无限滚动的概念在我的列表中，使用 jScroll 的插件。

Im trying to create a dynamic list <ul> using JS and finally its working. Now i need to implement the infinite scrolling concept in my list, using jScroll plugin.

于是我研究了很多关于jScroll，但我不能找到我所需要的任何教程。大多数使用 PHP 教程语言pretty的多，而在我的情况下，我做了我的服务器（ PHP 使用简单的 SELECT 查询与限制和 OFFSET 上并返回一个 JSON 。

So i researched a lot about jScroll, but i cant find any tutorial i needed. Most of the tutorials using PHP language pretty much, while in my case i have done my server (PHP) code using simple SELECT query with LIMIT and OFFSET on it and returning a json.

这是我的jQuery / AJAX code表示创建数据库的动态列表，它已经工作

This is my jQuery/AJAX code that create the dynamic list from database, its already working :

$.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。但是，我不明白它的code，如：

Because my dynamic list is already working, now i just need to implement the jScroll. However, i dont understand its code, like :

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

如何在我的情况下，实现这一点？我只是追加＆LT;李＆GT; 在我的jQuery / AJAX因此，如何对 nextSelector

How to implement this in my case? I just append <li> in my jQUery/AJAX so how about the nextSelector?

任何帮助是AP preciated，请你只问你是否有一些问题。

Any help is appreciated, please just ask if you have some question.

感谢您的帮助：D

推荐答案

您哈瓦每一件事preTY多集只需要调用jscroll在适当的时间。

You hava every thing prety much set just needed to call jscroll at proper time.

$.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>');
                }
                //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, 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++;
                });
            }
        }
        });

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

这篇关于如何实现jScroll？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！