在前端工作中，框架作為快速搭建項目的工具重要不言而喻。各種框架都有這其各自不同的適合場景像是bootstrap(有點過時)適合響應(yīng)式項目，vue適合做雙向數(shù)據(jù)綁定，react更適合做交互，這里文匯軟件小編就來給大家介紹一種適合做后臺頁面開發(fā)的框架——layui，今天我們先介紹分頁。
分頁，作為我們前端經(jīng)常接觸的組件有過一定經(jīng)驗的前端都不會陌生，而作為前端我們更加注重的是點擊時如何進行數(shù)據(jù)交換。
首先我們可以先去官方文檔中查看分頁如何使用
然后它內(nèi)部的代碼如下圖
最上部的div為分頁展示的內(nèi)容，ul為分頁的頁碼。
在使用分頁前需要先調(diào)用layui的laypage模塊，nums為設(shè)置好的每頁顯示數(shù)量然后在定義分頁的render函數(shù)，內(nèi)部的data為后臺所傳遞的數(shù)據(jù)，curr為當(dāng)前頁面的數(shù)據(jù)，下面的方法為將當(dāng)前頁碼數(shù)算出當(dāng)前頁面數(shù)據(jù)并在總數(shù)據(jù)中使用splice方法提取出來并為其添加li標(biāo)簽進行渲染
最后將他掛載到對應(yīng)展示的容器上，count為數(shù)據(jù)的總數(shù)值從服務(wù)端獲得，jump函數(shù)為將render的頁碼函數(shù)掛載到頁碼容器上
最后服務(wù)端返回的數(shù)據(jù)格式如上圖。
以上就是小編分享的了，如果喜歡的話就來文匯軟件關(guān)注小編吧
上一篇： vue路由如何使用
下一篇： 微信小程序如何進行表單驗證
