原生ajax写的上拉加载

Posted seanlxj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生ajax写的上拉加载相关的知识,希望对你有一定的参考价值。

上拉加载的思路

1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据

2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用

javascript:
alert(document.body.clientWidth);        //网页可见区域宽(body)
alert(document.body.clientHeight);       //网页可见区域高(body)
alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等
alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等
alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域
alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域
alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)
alert(window.screenTop);                     //浏览器距离Top
alert(window.screenLeft);                     //浏览器距离Left
alert(window.screen.height);                //屏幕分辨率的高
alert(window.screen.width);                 //屏幕分辨率的宽
alert(window.screen.availHeight);          //屏幕可用工作区的高
alert(window.screen.availWidth);           //屏幕可用工作区的宽



Jquery
alert($(window).height());                           //浏览器当前窗口可视区域高度
alert($(document).height());                        //浏览器当前窗口文档的高度
alert($(document.body).height());                //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width());                            //浏览器当前窗口可视区域宽度
alert($(document).width());                        //浏览器当前窗口文档对象宽度
alert($(document.body).width());                //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

  

 //获取滚动条当前的位置
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //获取当前可视范围的高度
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //获取文档完整的高度
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }
var upDown = function (opt) {
        opt = opt || {};
        var up = opt.up || function () {
        };
        window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
             if(is_scroll === true){ //当这个为true的时候调用up方法  ....is_scroll没看懂往下看
   up();
  }}

        }
    };

3.首先要默认加载第一页,在window.onload调用upDown这个方法

   window.onload = function () {
        getData();//页面加载完就显示了第一页
        upDown({
            up: getData
        });
    }

4.当页面滚到底部的时候触发up()这个方法,up调用getdata这个方法.下面就是怎么获取数据了

在全局定义两个变量 var is_scroll = true;var count = 0;  

ajax的就不介绍了 可以看这个http://www.cnblogs.com/seanlxj/diary/2018/01/30/8385498.html

var is_scroll = true;
var count = 0;
function
getAjax() { var el, li; var xhr = new XMLHttpRequest(); xhr.open(‘get‘, ‘page‘ + count + ‘.json‘); xhr.send(); xhr.onreadystatechange = function () { var loadingEnd = document.getElementById(‘loadingEnd‘); var dropLoad = document.getElementById(‘dropLoad‘); if (xhr.readyState === 4 && xhr.status === 200) {          var res = xhr.responseText; var data = JSON.parse(res); allData = allData.concat(data);//新的一页拼接到后面; if (data.length === 0) { //当获取到的数据长度为0 说明没有count+是请求不到数据了
is_scroll = true // 定义为true loadingEnd.style.display
= ‘block‘; //显示没有数据
} el = document.querySelector("#wrapper ul"); for (var k in data) { //遍历获取到的每一条数据 li = document.createElement(‘li‘); // 创建节点 li.innerhtml = "<div class=‘item-top‘><span class=‘item-title‘>" + data[k].name + "</span><span class=‘item-money‘>" + data[k].money + "</span></div><div class=‘item-time‘>" + data[k].time + "</div><div class=‘bottom-line‘></div>"; el.appendChild(li, el.childNodes[0]); } dropLoad.style.display = ‘block‘;//显示加载中 } else { //这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画 setTimeout(function () { dropLoad.style.display = ‘none‘; }, 500) } }; }

 

 

  <style>
        .drop-load {
            text-align: center;
            height: 80px;
            line-height: 50px;
        }

        .drop-load .loading {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 100%;
            margin: 6px;
            border: 2px solid #666;
            border-bottom-color: transparent;
            vertical-align: middle;
            -webkit-animation: rotate 0.75s linear infinite;
            animation: rotate 0.75s linear infinite;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .loadingEnd {
            font-size: 0.3rem;
            color: black;
            width: 100%;
            height: 40px;
            text-align: center;
        }

    </style>
<body>
<div>
    <ul>
    </ul>
</div>
<div id="dropLoad" class="drop-load" style="display: none">
    <span class="loading"></span>
    <span>加载中</span>
</div>
<div id="loadingEnd" class="loadingEnd" style="display: none">到底了</div>
</body>

 







以上是关于原生ajax写的上拉加载的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序下拉刷新上拉加载

微信小程序下拉刷新上拉加载

微信小程序实现小程序下拉刷新与上拉加载

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

最详细的vue+vant的上拉加载,下拉刷新

mui上拉加载更多的使用