擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

作為前端開發，很多時候，后臺給的數據不是我們想要的，遇到好說話的，給你改，遇到那種不好說話的，只能自己動手了。今天就來給大家講講前端如何來模擬分頁，下面注釋很詳細，這里就不做過多的介紹了。

html容器

<div id="docList"></div>
<div class="more" id="docLoadMore">加載更多</div>

js邏輯處理

var data={
 // 分頁數據
 docPages: {
 pageNo: 1, // 當前頁碼
 pageSize: 3 // 一頁多少條數據
 },
 // 模擬數據
 docList: [{
 name: '這是我的第1篇文章'
 },{
 name: '這是我的第2篇文章'
 },{
 name: '這是我的第3篇文章'
 },{
 name: '這是我的第4篇文章'
 },{
 name: '這是我的第5篇文章'
 },{
 name: '這是我的第6篇文章'
 },{
 name: '這是我的第7篇文章'
 },{
 name: '這是我的第8篇文章'
 }]
}
$('#docLoadMore').on('click',function(){
 function getHtml(name) {
 // html模板
 var tpl='<div class="load-li dis-flex clearfix">'+
 '<span class="align-left">'+
 '<img src="../images/productDetails/yh_product_wendang_icon@2x.png" / class="word-icon">'+
 '</span>'+
 '<span class="color-66 flex1 li-content fs-01">'+name+'</span>'+
 '<span class="align-right">'+
 '<img src="../images/productDetails/yh_product_xiazai_icon@2x.png" / class="load-icon">'+
 '</span>'+
 '</div>';
 return tpl;
 }


 var pageNo=data.docPages.pageNo;
 var pageSize=data.docPages.pageSize;
 // 計算最多分多少頁
 // 總條數 / 一頁多少條=可以分多少頁 如果是小數 向上取整(Math.ceil)
 let maxPage=Math.ceil(data.docList.length / pageSize);
 // 如果頁面大于總頁數return
 if (pageNo > maxPage) {
 console.log('沒有更多了');
 return;
 }
 // 計算第n頁時取第幾條到第幾條數據
 var startIndex=(pageNo-1) * pageSize; // 下標從0開始，所以-1
 // 1:(1-1)*2=>0
 // 2:(2-1)*2=>2
 // 3:(3-1)*2=>4
 // 4:(4-1)*2=>6
 var endIndex=pageNo * pageSize - 1;
 // 1: 1*2=>2
 // 2: 2*2=>4
 // 3: 3*2=>6
 data.docPages.pageNo ++;
 // 根據下標找到對應的頁碼的數據
 var newPage=vm.data.docList.slice(startIndex, endIndex+1);
 let html='';
 newPage.map(function(item){
 html +=getHtml(item.name);
 });
 // 向元素后面插入準備好的html內容
 $('#docList').append(html);
})

中間有部分是模板，看的不是很清楚，看下面截圖。

上面代碼沒有初始化第一頁數據，點擊一下才會出來第一頁的數據，所以可以在頁面加載完畢，自動觸發一下點擊事件

$('#docLoadMore').trigger('click');

是不是很簡單了，只要自己動手操作，發現事實都很簡單。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址請點擊下方“了解更多”

站分頁功能是必不可少的，一般用在列表頁面中，javascript實現分頁效果，效果如下：

實現代碼

html結構：

CSS樣式：

javascript：