web和webApp如何实现上拉加载和下拉刷新

来源：互联网发布：java开发重庆薪酬编辑：程序博客网时间：2024/06/06 01:09

web端中处理列表有两种方式：一种是通过分页界面表示当前是多少页，通过点击上一页和下一页切换页面显示。

另一种是基于滑动框滚动实现下拉刷新和上拉加载功能实现。

android和ios中经常会有下拉刷新列表和上拉加载功能实现。

web和webApp中也可以通过下拉加载和上拉刷新实现该功能。

实现思路：

1.后端提供分页接口

2.list页面打开默认显示第一页的列表

3.js监听到页面顶部下拉时，清除所有list显示，请求第一页列表显示

4.js监听到页面滚动到底部时，增量加载下一的列表进行列表显示

实现效果：

实现代码：

newList.html：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">    <link rel="stylesheet" type="text/css" href="css/newList.css">    <script type="text/javascript" src="js/utils/jquery.js"></script>    <script type="text/javascript" src="js/utils/utils.js"></script>    <script type="text/javascript" src="js/newList.js"></script></head><body>        <div class="head" >            <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>            newList             </div>   <div class="newList" id="newList" >       <!--<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html">-->           <!--<div class="itemUp">-->               <!--<span class="abstract" >1111</span>-->               <!--<span class="source" >2222</span>-->               <!--<div class="clear"></div>-->           <!--</div>-->           <!--<div class="itemDown" >-->               <!--<span class="author"  >3333</span>-->               <!--<span class="publication_time"   >4444</span>-->               <!--<div class="clear"></div>-->           <!--</div>-->           <!--<div class="itemLine" ></div>-->       <!--</a>-->   </div></body></html>

newList.js：

/** * Created by Administrator on 2017/10/6. */var currentOffset=0;window.onload=function () {//获取新闻listgetNewList();}function getNewList(){ $.ajax({        type: "get",        url: "http://52.214.109.210:5000/news?offset="+currentOffset+"&limit=10",        data: {        },        dataType: "json",//            contentType:'application/json',        success: function (data) {            var newList=document.getElementById("newList");            newList.innerHTML='';                                              //新闻列表            $.each(data.results, function(n, value) {              var authorStr="";            if(value.author==null||value.author==undefined||value.author=="null"){            authorStr="authors";            }else{            authorStr=value.author;            }                // alert(value.username);                newList.innerHTML=newList.innerHTML                    +'<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html?link='+value.link+'">'                    +'<div class="itemUp">'                    +'<span class="abstract" >'+value.abstract+'</span>'                    +'<span class="source" >'+value.publication_time+'</span>'                    +'<div class="clear"></div>'                    +'</div>'                    +'<div class="itemDown" >'                    +'<span class="author"  >'+authorStr+'</span>'                    +'<span class="publication_time"   >'+value.title+'</span>'                    +'<div class="clear"></div>'                    +'</div>'                    +'<div class="itemLine" ></div>'                    +'</a>';            });                                     $(document).scroll(function(){var bheight = $(document).height();//获取窗口高度var sheight = $("body")[0].scrollHeight;//获取滚动条高度，[0]是为了把jq对象转化为js对象var stop = getScrollTop();//滚动条距离顶部的距离console.log("bheight:"+bheight);console.log("sheight:"+sheight);console.log("stop:"+stop);console.log("document.body.scrollTop:"+document.body.scrollTop);console.log("window.screen.height:"+window.screen.height)if(stop==0){//alert("下拉刷新");}//滚动框到底部时加载更多if(stop-60>=sheight-window.screen.height){//当滚动条到顶部的距离等于滚动条高度减去窗口高度时//alert("加载更多");//加载更多新闻loadMoreNewList();}});        },        error: function (XMLHttpRequest, textStatus, errorThrown) {            // alert(XMLHttpRequest.status);            // alert(XMLHttpRequest.readyState);            // alert(textStatus);            // alert(AjaxErrorMessage());        },    });}    function loadMoreNewList(){    currentOffset=currentOffset+10;$.ajax({        type: "get",        url: "http://52.214.109.210:5000/news?offset="+currentOffset+"&limit=10",        data: {        },        dataType: "json",//            contentType:'application/json',        success: function (data) {            var newList=document.getElementById("newList");            //            newList.innerHTML='';            //游戏列表            $.each(data.results, function(n, value) {            var authorStr="";            if(value.author==null||value.author==undefined||value.author=="null"){            authorStr="authors";            }else{            authorStr=value.author;            }                // alert(value.username);                newList.innerHTML=newList.innerHTML                    +'<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html?link='+value.link+'">'                    +'<div class="itemUp">'                    +'<span class="abstract" >'+value.abstract+'</span>'                    +'<span class="source" >'+value.publication_time+'</span>'                    +'<div class="clear"></div>'                    +'</div>'                    +'<div class="itemDown" >'                    +'<span class="author"  >'+authorStr+'</span>'                    +'<span class="publication_time"   >'+value.title+'</span>'                    +'<div class="clear"></div>'                    +'</div>'                    +'<div class="itemLine" ></div>'                    +'</a>';            });                },        error: function (XMLHttpRequest, textStatus, errorThrown) {            // alert(XMLHttpRequest.status);            // alert(XMLHttpRequest.readyState);            // alert(textStatus);            // alert(AjaxErrorMessage());        },    });    }//获取滚动框到顶部的高度    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;        }

utils.js：

/** * Created by Administrator on 2017/4/18. *//**为元素增加类属性 */function addClass(elements, value){    if (!elements.className) {        elements.className = value;    }    else    {        newClass = elements.className;        newClass += " ";        newClass += value;        elements.className = newClass;    }}/**获取根据参数名url的参数*/function getParamsId(key) {    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");    var loc=decodeURI(window.location.search);    // alert(r);    var r = loc.substr(1).match(reg);    if (r != null) {        return unescape(r[2]);    }    return null;};/**个人中心获取id值*/function getParams(key) {    var r = window.location;    r=r.toString();    var strArray=r.split('/');    var pernalId=strArray[strArray.length-1];    return pernalId;}/** 获取json数组的长度*/function getJsonLength(json){    var jsonLength=0;    for (var i in json) {        jsonLength++;    }    return jsonLength;}/**判断时间大小*/function judgeTime(startTime,endTime) {    var startTime =new Date(startTime.replace("//-/g", "//"));    var endTime = new Date(endTime.replace("//-/g", "//"));    return startTime<endTime;}/**判断时间间隔多少小时*/function judgeTimeDiffer(startTime,endTime) {    var startTime =new Date(startTime.replace("//-/g", "//"));    var endTime = new Date(endTime.replace("//-/g", "//"));    return parseInt((startTime.getTime() - endTime.getTime()) / 1000 / 60 / 60);}/**获取当前点击时的坐标位置*/function getMousePos(event) {    var e = event || window.event;    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;    var x = e.pageX || e.clientX + scrollX;    var y = e.pageY || e.clientY + scrollY;    //alert('x: ' + x + '\ny: ' + y);    return { 'x': x, 'y': y };}/**获取屏幕中央的位置*/function  getMiddleLocation(event) {    var e = event || window.event;    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;    var x = scrollX ;    var y =  scrollY ;    return { 'x': x, 'y': y };}

阅读全文

0 0