移动端滑动加载
页面css
ul li{ height: 140px; font-size: 18px; background:#eee ; } #loading{ display: none; margin:0 auto; text-align: center; padding: 15px 0; }
页面html
页面主要两个盒子,一个放加载的数据,一个放加载时的提示用的。
<ul id="list"></ul> <div id="loading"></div>
页面JQuery
加载的临界是页面滑动到内容的底部时加载下一页内容
var resList = {data:[{num:'1'},{num:'2'},{num:'3'},{num:'4'},{num:'5'},{num:'6'},{num:'7'},{num:'8'},{num:'9'},{num:'10'}]}//模拟数据 var indexPage = 1;//当前页 var pageNum = 4;//一页显示多少条数据 var pageMax = 0;//共有多少页 var off_on = true;//滑动加载开关,防止循坏加载 var dataList=resList.data; pageMax = dataList.length%pageNum?parseInt(dataList.length/pageNum)+1:dataList.length/pageNum; console.log('总页数:'+pageMax) xhtml(1);//进入页面时预加载 $('#list').on('touchstart', function (e) { if (!off_on) { off_on = !off_on; }; }); $('#list').on('touchmove',function(e){ if (($(document).scrollTop() + $(window).height())>= $(document).height()) {//判断是否滑到内容底部 if(off_on){ console.log(indexPage) $('#loading').show().html("<img src='./img/loading.gif'>") setTimeout(function(){ indexPage++; $('#loading').hide() console.log(off_on) xhtml(indexPage); },1000) off_on = !off_on; } } }) //列表内容循环 function xhtml(indexPage){ var xhtml=''; if(dataList.length>0 & dataList!=null & dataList!=''){ if(indexPage > pageMax){ $('#loading').show() $('#loading').html('没有更多了~') setTimeout(function(){ $('#loading').hide() },2000) }else{ var data = dataList.slice((indexPage-1)*pageNum,indexPage*pageNum) for(var i=0;i<data.length;i++){ xhtml+='<li>'+data[i].num+'</li>' } } $('#list').append(xhtml); }else{ $('#list').html('空空如也~~'); } }
在练习过程写的dom,写的不好的地方望多多提出。