JS----前端上拉加载数据

        在电脑端如果数据太多我们马上会想到分页，但是手机端页面十分珍贵，本来就不大的页面再分出一个分页部分那就真的太浪费了，我们有的时候又不能一次加载所有的数据那怎么办呐？？利用现在比较流行的上拉加载！

        其实上拉加载原理很简单，我们向下浏览页面的时候，当滚动条下拉触底的时候，触发我们设定的函数，然后我们使用ajax技术向后台请求数据追加到我们的浏览列表中，原理就是这么简单粗暴

1.我们需要监听jquery的scroll事件：

                $('#history').scroll(function()

2.我们需要获取三个变量

                1》滚动条距离容器顶部的高度

                2》获取整个容器的实际高度，

                3》获取容器的可视高度

3.当滚动条距离顶部的高度+容器的可视高度 = 容器的实际高的时候，那么就证明滚动条到底了！

4.我们监听scroll时间，在事件中当满足：

                    滚动条距离顶部的高度+容器的可视高度 = 容器的实际高

            我们便使用ajax异步请求数据，

5，在ajax请求的success回调中，我们将获取的数据追加到视图容器中

6.这样一个简单的上拉加载原理就完成了！

7.贴一个我的简单测试代码：

            var page = 1;

            $('#history').scroll(function(){

            //获取滚动条距离容器顶部高度..

                var scrolltop =$('#history').scrollTop();

            //获取整个容器的实际高度(包括滚动条的实际高度)..

                var scrollall =$("#history").get(0).scrollHeight;

            //获取容器的可视高度..

                var scrollsee =$("#history").height();

                if(scrolltop+scrollsee>=scrollall){

                        page++;

                        $.ajax({

                                type:"post",

                                url:"{php echo $this->createMobileUrl('getData')}",

                                data:{page:page},

                                dataType:"json",

                                success:function(data){

                                        if(data.length>0){

                                                 for(let i=0;i

                                                if(data[i].log_type == 0){

                                                     $('#history').append('

'+data[i].log_date+'

猜涨

投注'+data[i].log_num+'积分

')

                                             }else{

                                                    $('#history').append('

'+data[i].log_date+'

猜跌

投注'+data[i].log_num+'积分

')

                                     }

                                }

                                        }else{

                                             alert('没有更多数据了')

                                        }

                            },

                      })

                }

            })