手机网站下拉加载数据js(简单版)

加载内容的地方html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="bgcolor_f0 clearfix">        <div class="recharge">            <ul class="recharge-list">                内容的地方,第一加载输入                 {loop $orderlist $order}                <li class="recharge-list-view">                    {$order['date']}——站内充值                    <span>{$order['money']}</span>                </li>                {/loop}            </ul>        </div>    </div> <input type="hidden" id="page" value="1"/>//

下拉加载内容的js

    $(function(){
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
            var scrollHeight = $(document).height();           //当前页面的总高度
            var windowHeight = $(this).height();               //当前可视的页面高度
            if(scrollTop + windowHeight >= scrollHeight)  { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                var page = parseInt($("#page").val())+1;
                $.ajax({
                    type:'POST',
                    data:"page="+page,
                    url:SITEURL+'user/ajax_record_more',
                    dataType:'json',
                    success:function(data){
                        console.log(data.status);
                        console.log(data.orderlist);
                        if(data.status=='success'){
                            var html = '';
                            $.each(data.orderlist,function(i,row){
                                html+='<li class="recharge-list-view">'+row['date']+'——站内充值 <span>'+row['money']+'</span></li>';
                            })
                            $("#page").val(page);
                            $(".recharge-list").append(html);
                        }

                    }
                })

            }

        })

    })