H5下拉分页自动加载

最新推荐文章于 2024-07-12 08:49:54 发布

fiona-frontEnd

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量1.7k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/DeliaWen/article/details/91860770

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html:

<input type="hidden" value="1" id="pageNum"/>
<ul id="list">
</ul>
<div id='loadMore'></div>

js:

            var pageTotal = 1;
            $("#list").empty();
            window.loadList = function (num)
            {
            	var pageIndex = parseInt(num);
                $.ajax({
                    type: "post",
                    url: "",
                    data: { pageIndex: pageIndex, pageSize: 8, id: '@id' },
                    beforeSend: function(XMLHttpRequest){
                    	if(pageTotal && pageTotal != undefined && pageIndex < pageTotal){
                    		$("#loadMore").text('正在加载数据');
                    	}else{
							$("#loadMore").text('已加载全部数据');
							return;
                    	}
                    },
                    success: function (data)
                    {
                        if (data.Flag === 0)
                        {
                            if (data.ResultObj && data.ResultObj.List && data.ResultObj.List.length > 0)
                            {
                            	pageTotal = data.ResultObj.TotalPages;
                                $.each(data.ResultObj.List, function (i, n)
                                {
                                    var str = "";
                                    var edit = '';// '<a href="">再次编辑</a>';
                                    switch (n.VerifyStatus1)
                                    {
                                    case 0: str = "review"; break;
                                    case 1:
                                        str = "pass";
                                        edit = "";

                                        break;
                                    case -1: str = "noPass"; break;
                                    default: break;
                                    }

                                    var html = '';
                                    html += '<li class="djStatus ' + str + '">';
                                    html += '     <div class="wjInfoTop">';
									.....
                                    html += '     </div>';
                                    html += ' </li>';

                                    $("#list").append(html);
                                });

                            }
                        }else{
                        	$("#loadMore").text('暂无数据');
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
		                $("#loadMore").text('数据加载失败，请重试');
		            },
                    complete: function () { 
                    }
                });
            }
            window.loadList(1);
$(window).scroll(function () {
        		//已经滚动到上面的页面高度
        		var scrollTop = parseFloat($(this).scrollTop()),
        		//页面高度
            	scrollHeight = $(document).height(),
        		//浏览器窗口高度
            	windowHeight = parseFloat($(this).height()),
            	totalHeight = scrollTop + windowHeight;
				//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
		        if (totalHeight >= scrollHeight - 0.7) {
	                //分页数
	                num = parseInt($("#pageNum").val()),
	                num = num + 1;
		            $("#pageNum").attr('value', num);
	                window.loadList(num);
		        }
	    	});