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

时间：2021-06-01 21:31:56

加载内容的地方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);

                        }

                    }

                })

            }

        })

    })

　　

相关文章