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

加载内容的地方html

 <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);
                        }

                    }
                })

            }

        })

    })