Vue mockJs axios 實現分頁功能

2021-10-05 06:47:28 字數 1507 閱讀 5331

參考芳姐的課程,由於本人不會寫介面,直接使用mock模擬了乙個介面

效果圖

html部分

序號

商品名稱

商品**

商品詳情

0">

}}}商品詳情

0">

css部分

*

ul li

.page-container

.page-container .page-head

.page-container .page-content

.page-content tr th,td

.page-left-tip, .page-right-tip

.page-left-tip

.page-right-tip

.page-item

.page-item button

.page-item button:hover

.active

這裡說一下思路,我是根據當前頁碼,採用陣列的slice來得到中間要顯示的頁碼

js部分

window.

onload=(

)=>},

mounted()

, filters:},

computed:

}middlepages()

else

else

else}}

}}, methods:).

then

(res =>).

catch

(err =>)}

,togglearray

(num)},

jumpto

(index),}})}

mockjs部分

const random =  mock.random

const pagelist =

for(

let i =

0; i<

104; i++

) pagelist.

push

(page)

}// 分頁介面

)

總結,分頁一般包括(一次性請求-資料量少的情況、後端根據前端需求返回固定數量條數),總的來說還是不難理解的,最重要的是要明白需要定義哪些驅動資料(比如頁碼、總頁數、總條數)一般後端是要傳過來包括(總頁數和總條數,只傳總條數前端也可以自己計算),後面的就是一些業務邏輯和mock的介面的配置

實變函式 實分析總結

一 概述。實變函式,又叫實分析,整本書滿滿的證明就講了乙個勒貝格積分。最為大家所熟知的是用牛頓 萊布尼茨公式算的黎曼積分。但是黎曼積分本身依賴於函式的連續性,像不連續的狄利克雷函式就無法積分了。為了解決這一問題,勒貝格利用分割值域的方法,使得函式可積。但是分割出來的值域,只能放在一起,形式集合。如果...

NestedScrollWebview實現與優化

nestedscrollwebview實現與優化 原文如下 好久沒寫了,好像也沒什麼人關注我,呵呵,但我還是堅持寫一下,希望能幫到有需要的人!今天我來說一下nestedscrollwebview。最近在弄乙個需求,我需要用到coordinatorlayout webview 實現滾動互動效果,但要實...

saltstack keepalived實現高可用

本篇部落格承接saltstack安裝部署和saltstack grains,pillar,jinja模組的使用 建立目錄。root server1 keepalived vim files keepalived.conf configuration file for keepalived globa...