我想实现一个战绩列表的动态显示,当滑动时动态往后添加

clipboard.png也就是这样,先展示5条数据,然后滑动时往后添加数据,无滑动条显示,

阅读 2.8k
4 个回答

监听scroll然后进行AJAX请求。

mui 有一个插件pullRefresh 上拉加载更多;
下面是自己写的代码
$(window).scroll(function(){

    var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
    var totalHeight = $(document).height();            //当前页面的总高度
    var sevicewHeight = $(this).height();                //当前可视的页面高度
    //console.log("scrollTop:"+scrollTop+"px")
    //console.log("totalHeight:"+totalHeight+"px")
    //console.log("windowHeight:"+sevicewHeight+"px")
    if(scrollTop + sevicewHeight >= totalHeight){
        alert("上拉加载");
        
    }else if(scrollTop<=0){
       alert("下拉刷新");
    }

数据看量大不大;数据可以一次性加载过来;分批渲染;也可以 分批加载 和后台协商就是

类似传统的分页写法,监听列表元素的滚动事件,当滚动到底部的时候在列表中追加下一页的数据,无数据的给出友好提示.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题