js页面列表加载常用方法总结

.wrap{max-width:960px;保证金：0自动；填充：15px0;}.wrapli{填充：5px0;list-style:square;}.wraplih3,.wraplip{text-transform:capitalize;}.wraplih3:hover{color:#f00;光标：指针；}#pagesli{显示：内联块；右边距：10px；列表样式：无；}#pages按钮{宽度：自动；最小宽度：40px；高度：40px；背景：#fff；框阴影：005px#fff；边框：1px实心#ccc；边界半径：5px；字体大小：16px;}#pagesbutton:hover,#pagesbutton.active{color:#fff;边框颜色：#f00；背景：#f00；cursor:pointer;}#pagesbutton.dis{cursor:no-drop;}.wrap.loading{line-height:70vh;文本对齐：居中；列表样式：无；}.wrap.nodata{列表样式：无；text-align:center;}定义变量让datas=[],//分组列表current=1,//当前页pages=0,//总页数total=0,//总页数listElem=document.getElementById('list'),//列表内容pageElem=document.getElementById('页面');//页面按钮处理数据我们使用axios获取json数据，模拟抓取接口的情况//getlistasyncfunctiongetList(page=1){letres=awaitaxios.get('https://jsonplaceholder.typicode.com/posts');如果（res.status===200）{让数据=sliceData（res.data）;页数=数据页数；总计=res.data.length;数据=[...数据列表];return{code:200,msg:'get_succ',data:{list:data.list[page-1],current:page,pages:data.pages,total:list.length,}}}}写一个方法给将数组切成相等的部分。//处理数据functionsliceData(list){letnewArr=[],step=10,pages=Math.ceil(list.length/10);for(leti=0;i加载中...';如果（datas&&datas.length）{data={code:200,msg:'get_succ',data:{list:datas[current-1],current:current,pages,total,}}else{data=await获取列表（当前）；}if(data.code===200){letlist=data.data.list;if(list&&list.length){让liStr='',pageStr='';对于（常量项oflist){liStr+=`

${item.title}

${item.body}

`;}setTimeout(()=>{listElement.innerHTML=liSize;},1000);if(pageElement.innerText===''){for(easyi=0;i${i+1}`}pageElem.innerHTML=`

string

下一个键

${pageStr}

下一个键

<按钮id="end"data-id="${data.data.pages}">结束页面

`;showHighLight(current);addClick();}}else{listElem.innerHTML='Nodata';}}}添加点击事件//添加点击函数addClick(){letbtns=document.querySelectorAll('#pageslibutton');for(constitemofbtns){item.addEventListener('click',toggleList,false);}}切换页面内容//切换页面函数toggleList(event){letid=event.target.dataset.id,bid=event.target.id;if(id){current=Number(id);}if(bid=='prev'){if(current<=1){current=1;}else{current--;}}elseif(bid=='next'){if(current>=pages){current=pages;}else{current++;}}showHighLight(current,bid);showList(current);}显示高亮//显示突出显示功能showHighLight(current,bid){letbtns=document.querySelectorAll('.page'),startBtn=document.getElementById('start'),endBtn=document.getElementById('end');for(constitemofbtns){item.className='page';}btns[current-1].className='页面活动';startBtn.className=当前==1？'主动显示'：'';endBtn.className=当前==页数？'activedis':'';}页面渲染完成后，添加一个定时器，模拟等待从服务器获取数据的效果。实际上，这是没有必要的。加载按钮的方法和上面类似，就是把分页块改成一个按钮，在现有列表中不断添加新的列表内容，其他和分页加载没有太大区别。页面结构加载...

加载更多