【專案實戰】基於Vue3+Vant3造一個網頁版的類掘金app專案 - 沸點詳情

theme: channing-cyan

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

前言

大家好，昨天我們對沸點列表進行了封裝，同時實現了「發現」「熱門」及「關注」三個列表頁的內容展示，到此關於列表頁的分享就基本結束了。在前面關於沸點評論的分享中我們提到「每條沸點最多隻顯示5條評論，剩下的評論將放在沸點詳情頁面展示」並且我們頁已經添加了沸點詳情頁面元件，只是內容暫時還空著。在接下來的幾次分享中我們將致力於沸點詳情的分享。

沸點詳情佈局分析

在開始分享之前我們先來分析下官方的沸點詳情頁的組成，如下圖： 首先詳情頁主要分為兩大塊：沸點內容區和評論區； 沸點內容區由作者資訊，沸點內容以及操作按鈕等部分組成。而評論區則包括：評論文字框，熱門評論和全部評論三塊內容組成。另外還有個細節就是，在熱門評論中還有可能會包涵很多評論資訊，但是這些評論不是全部展示的，而是隻展示幾條評論，然後再通過點選“檢視更多”來載入更多的評論資訊，有點類似於分頁載入，所以整個頁面的內容還是稍微有點複雜的，我們將分為三到四次進行分享，今天我們先來分享沸點內容區的實現。

沸點內容展示

通過上面的佈局分析我們知道沸點內容頁主要包括：作者頭像、暱稱、釋出時間、關注狀態、沸點內容、所屬主題、評論數和點贊等，而在看下我們之前分享過的評論列表頁，每條沸點內容好像也是由這些資訊組成，唯一不同的是沸點詳情頁少了個關注狀態，並且把熱門評論放在了下面的區塊中，這樣一來沸點詳情頁中的內容實現起來也就簡單了，我們只需把之前列表頁中的內容拷貝過來改造一下就可以了。大概實現思路如下： - 首先在開啟之前新建AllReply.vue檔案，給該檔案新增一個標題元件：van-nav-bar用於返回上一頁 - 將沸點列表頁中關於沸點內容的程式碼拷貝過來，去除掉熱評相關程式碼並新增展示關注狀態的程式碼（之前已經封裝好了的comment.vue） - 在setup方法中接收列表頁傳過來的引數，也就是沸點的唯一id - 根據上述獲取到的id去請求detail介面從而獲取到沸點的內容資訊（包括作者資訊及評論資訊等） 核心程式碼及效果圖如下： ```html js setup() { const route = useRoute(); const state = reactive({ pin: {} }); const onClickLeft = () => { history.back(); };

const msg_id = route.params.msg_id;
api.detail(msg_id).then((res) => {
  console.log(res.data);
  res.data.msg_Info.sub_content = res.data.msg_Info.content.substring(
    0,
    80
  );
  res.data.msg_Info.content.length >= 80
    ? (res.data.msg_Info.sub_content += "...")
    : null;
  res.data.msg_Info.show_content = res.data.msg_Info.sub_content;

  state.pin = res.data;
});

const digg = (itemid, is_digg) => {

};

return {
  ...toRefs(state),
  onClickLeft,
  digg,
};

}, ```

總結

今天的分享中我們分析了沸點詳情頁的組成，沸點內容區塊的思路分析以及最終實現了沸點詳情頁中的沸點內容展示功能，明天我們將實現沸點詳情頁中的熱評模組功能。今天的分享就到這裡了，喜歡的話歡迎給個贊哦！