【專案實戰】基於Vue3+Vant3造一個網頁版的類掘金app專案 - 沸點列表抽取封裝

theme: channing-cyan

一起養成寫作習慣！這是我參與「掘金日新計劃 · 4 月更文挑戰」的第9天，點選檢視活動詳情。

前言

大家好，昨天我們已經實現了沸點內容和評論內容的點贊功能以及檢視更多評論功能（關於檢視更多評論功能目前我們只實現了簡單的頁面跳轉，關於內容載入我們後期再進行補充）。基本上沸點列表功能就基本上算是完成了。但是目前我們完成的僅僅是「發現」tab頁中的列表，而在我們的設計中還有個「熱榜」和「關注」列表，並且這幾個tab頁除了載入內容不同外，其它佈局和結構貌似都是一樣的，因此我們可以把現在已經做好的「發現」頁中的列表進行抽取和封裝以實現三個頁面共用。 今天我們要實現的目標： - 發現列表抽取及封裝 - 熱榜列表載入 - 關注列表載入

沸點列表抽取及封裝

目前為止我們實現的沸點列表中（Fire.vue）除了三個tab頁的程式碼外，其它的程式碼全部都是屬於列表的，因此列表的封裝非常簡單，只需要把Fire.vue中關於列表的程式碼全部抽取出來即可。 另外我們再來看一下下圖中，「最新」「熱門」和「關注」三個頁面佈局都是一樣的，唯一不同的就是所載入的資料不同，並且我們從圖中也可以看出，三個頁面所請求的介面也是不同的，而我們要封裝的列表是需要給三個頁面共用的，因此我們必須把不同的地方作為引數動態傳進去，也就是說介面需要動態傳入，其它的可以直接使用原來的程式碼即可。 大概實現思路如下： - 在views中新建一個PinList.vue組建 - 將Fire.vue中關於列表資料的程式碼（html，js和css）原封不動的拷貝到PinList.vue中 - 為了能夠實現3個頁面載入請求不同的介面，我們還需在定義一個props屬性 - url，用於接收介面地址 - 修改setup中的load方法，將原來的請求介面字串替換成 url 屬性 核心程式碼如下： ```html

```

js //js 程式碼中也是把Fire.vue中列表相關的拷貝過來，然後再新增一個url屬性 export default { props: { url: { type: String, required: true, }, }, setup(props,ctx){ const { url } = props; const onLoad = function () { http .post(url, { cursor: pageNo, limit: 20, sortType: 300, }).then(res=>{ //.... }); } }

熱榜和關注頁功能實現

上面我們已經把列表進行了抽取和封裝，現在相當於3個列表頁都已經實現了，我們只需要在Fire.vue中匯入PinList並傳入不同的url即可實現，關鍵程式碼及效果圖如下： ```html js import PinList from "./PinList.vue"; export default { components: { PinList, }, }; ```

總結

今天的分享非常簡單，我們把沸點列表進行了抽取和封裝，同時實現了熱榜和關注功能。好了本次分享就先到這裡了，喜歡的朋友歡迎給個贊哦！