天天看點

js實作下拉滾動加載資料

需要加hidhen标簽:

        <input type="hidden" id="hidnextpage" value="2"/>//下一頁

           <input type="hidden" id="hidhasContent" value="1"/>//是否還有内容

          <input type="hidden" id="hidloaded" value="1"/>//是否加載完

          <input type="hidden" id="hidsort" value="0" />//排序字段

js代碼:

   <script type="text/javascript">

                $(function () {

                    var cat_id = "<%=CatId %>";

                    var sort = 0;

                    binddata(0, ""); //綁定前幾條資料

                    //滾動時加載資料

                    $(window).bind('scroll', function () {

                        var f = arguments.callee;

                        binddata(1, f);

                    });

                    var hasContent = $("#hidhasContent").val();

                    var loaded = $("#hidloaded").val();

                    function isScrollToBottom(isscroll, height) {

                        var viewportH = self.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight;

                        var scrollT = self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

                        var scrollH = Math.max((document.documentElement && document.documentElement.scrollHeight), document.body.scrollHeight);

                        //alert("isscroll:"+isscroll+"+"+(viewportH +"+"+ scrollT)+"|"+scrollH +"-"+ height);

                        if (isscroll == 1 && viewportH == scrollH) {

                            $("#hidloaded").attr("value", "0");

                            return false;

                        }

                        else {

                            if (viewportH + scrollT >= scrollH - height) {

                                $("#hidloaded").attr("value", "1");

                                return true;

                            } else {

                                return false;

                            }

                        }

                    } //結束          

                    function binddata(isscroll, f) {

                        if (isscroll == 0) {

                            GetData(isscroll, f, cat_id, $("#hidsort").val(), 1, 10);

                        }

                        else {

                            var is_have = $("#hidishave").val();

                            if (is_have != 1) {

                                if (isScrollToBottom(isscroll, 20) && $("#hidhasContent").val() == 1 && $("#hidloaded").val() == 1) {

                                    var nextPage = $("#hidnextpage").val();

                                    $("#hidloaded").attr("value", "0");

                                    GetData(isscroll, f, cat_id, sort, nextPage, 10);

                                }

                            }

                        }

                    } //結束  

                    function GetData(isscroll, f, cat_id, sort, nextPage, size) {

                        if (isscroll == 0) {

                            $("#j_listContent").html("");

                        }

                        $("#hidishave").attr("value", "1");

                        $.ajax({

                            url: "Ajax/Item.ashx",

                            type: "POST",

                            data: { OPTION: "GetTopicList", CatId: cat_id.toString(), Sort: sort.toString(), PageIndex: nextPage.toString(), PageSize: size.toString(), Source: isios.toString() },

                            dataType: "text",

                            cache: false,

                            success: function (data, textStatus) {

                                //alert(data.toString());

                                if (data == null || data == "") {

                                }

                                else {

                                    if (textStatus == "success") {

                                        var obj = eval("(" + data + ")");

                                        if (obj.items.length == 0) {

                                            //$("#LoadMore_List").hide();

                                            $("#hidloaded").attr("value", "0");

                                            $("#hidhasContent").attr("value", "0");

                                        }

                                        var rad_a = parseInt(5 * Math.random());

                                        var rad_b = parseInt(Math.random() * (10 - 5 + 1) + 5);

                                        var rad_c = parseInt(10 * Math.random());

                                        var rad_d = parseInt(10 * Math.random());

                                        //alert("傳回數:" + obj.items.length + "|" + ser);

                                        for (var i = 0; i < obj.items.length; i++) {

                                            var strHmtl = "";

                                            var topicid = obj.items[i].topicid;

                                            var title = obj.items[i].title;

                                            var content = obj.items[i].content;

                                            var time = obj.items[i].time;

                                            var istop = obj.items[i].istop;

                                            var nickname = obj.items[i].nickname;

                                            var reviews = obj.items[i].reviews;

                                            var likes = obj.items[i].likes;

                                            var imglist = obj.items[i].imglist;

                                            var imgnum = imglist.length;

                                            var is_video = obj.items[i].isvideo;

                                                    strHmtl += "<li >";

                                                    strHmtl += "</li>";

                                            }

                                            $("#j_listContent").append(strHmtl);

                                        }

                                        $("#hidishave").attr("value", "0");

                                        if (isscroll == 1) {

                                            // alert("底部:" + $("#hidhasContent").val());

                                            //滾動時加載

                                            if ($("#hidhasContent").val() == 0) {

                                                $("#hidhasContent").attr("value", "0");

                                                //hasContent = 0;

                                                //$(window).unbind('scroll', f);

                                            } else {

                                                //loaded = 1;

                                                $("#hidloaded").attr("value", "1");

                                                nextPage++;

                                            }

                                        }

                                        else {

                                            nextPage++;

                                        }

                                        $("#hidnextpage").attr("value", nextPage.toString());

                                    }

                                }

                            }

                        });

                    }

                });

    </script>