快捷導(dǎo)航

VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁(yè)（3）

更新時(shí)間：2021年10月12日 15:39:51 作者：FungLeo

這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在上兩章的工作中,我們順利的實(shí)現(xiàn)了首頁(yè)的渲染,但是,只是渲染了一頁(yè)數(shù)據(jù)而已.我們可能需要渲染更多的數(shù)據(jù),這時(shí)候,我們就有必要考慮分頁(yè)了.

分頁(yè)有很多種方式,比如異步加載的分頁(yè)方式.然而對(duì)于沒(méi)有太多使用前端模版框架的朋友來(lái)說(shuō),一上來(lái)就使用這種方式,可能稍微有點(diǎn)難度.因此,我們這章的分頁(yè)實(shí)現(xiàn),是基于普通的鏈接分頁(yè)的方式完成的.

在我們有了更多的前端框架的使用經(jīng)驗(yàn)之后,我們可以使用更加豐富的分頁(yè)方法.

事實(shí)上,我們自己構(gòu)建一個(gè)分頁(yè)組件也不是不可以,在移動(dòng)端我都是自己的代碼實(shí)現(xiàn)的.但是,我這里要推薦的是使用 laypage 這個(gè)分頁(yè)插件,其官方網(wǎng)址是 (http://laypage.layui.com/).

分頁(yè)規(guī)則制訂

首先,我們來(lái)看一下接口說(shuō)明

接口說(shuō)明

這里是get接口,因此,如上圖所示,正確的請(qǐng)求方式就是,直接在接口的Url后面追加參數(shù).

http://cnodejs.org/api/v1/topics?page=11

好,那我們的url地址就可以是 //xxx/index.shtml?1 因?yàn)槲也粶?zhǔn)備用其他的參數(shù),只要把分頁(yè)給完成就可以了.因此,可以直接在后面加上分頁(yè)id,然后通過(guò)一個(gè)函數(shù)獲取url中的這個(gè)id,追加到接口上面,那么就可以實(shí)現(xiàn)我們的需求了.

寫代碼實(shí)現(xiàn)!

獲取URL中的ID

如上面所想,我們需要一個(gè)函數(shù),這個(gè)函數(shù)可以正確的獲得我們追加在url地址問(wèn)候好眠的id.

function getUrlId(){
 var host = window.location.href;
 var id = host.substring(host.indexOf("?")+1,host.length);
 return id;
}

如上代碼,通過(guò)這個(gè)函數(shù)方法,就可以獲得我們追加在url后面的ID了,測(cè)試一下

$(function(){
 var id = getUrlId();
 console.log(id);
 var url = "http://cnodejs.org/api/v1/topics";
 getJson(url,pushDom);
});

如下圖所示:

獲取ID

通過(guò)ID我們來(lái)獲取不同的數(shù)據(jù)

$(function(){
 var id = getUrlId();
 var url = "http://cnodejs.org/api/v1/topics?page="+id;
 getJson(url,pushDom);
});

如上,就可以根據(jù)不同的url來(lái)獲取不同的數(shù)據(jù)了.

使用 laypage 實(shí)現(xiàn)分頁(yè)

首先當(dāng)然是引用文件了.

在html適當(dāng)?shù)牟糠?加上分頁(yè)組件的盒子,如下:

然后,我們?cè)诠俜骄W(wǎng)站上把代碼給復(fù)制過(guò)來(lái).適當(dāng)修改,代碼如下

$(function(){
 var id = getUrlId();
 var url = "http://cnodejs.org/api/v1/topics?page="+id;
 getJson(url,pushDom);
 laypage({
 cont: $(".page"),
 pages: 100,
 curr: id,
 jump: function(e, first){
 if(!first){
 location.href = '?'+e.curr;
 }
 }
 });
})

最終效果如下圖所示:

實(shí)現(xiàn)分頁(yè)最終效果