在旅游類應用開發中，為用戶提供全面、直觀的信息展示界面至關重要。本文將分享如何基于 Vue3 + Axios 技術棧，實現一個包含攻略、游記、問答三大板塊的旅游攻略選項卡頁面，從樣式設計到交互邏輯，帶你深入了解整個開發過程。

項目背景與需求分析

隨著旅游行業的數字化轉型，用戶對于景區信息獲取的需求日益多樣化。游客不僅希望了解景區的游玩攻略、動物分布，還想查看其他游客的真實游記以及專業問答。因此，需要構建一個集多類型內容展示、交互跳轉于一體的頁面，通過選項卡形式高效組織信息，提升用戶體驗。

技術棧解析

1. Vue3：采用 Vue3 的響應式系統和組合式 API，簡化組件邏輯，提高開發效率和代碼可讀性。
2. Axios：用于發起 HTTP 請求，從后端接口獲取攻略、游記、問答等數據。
3. CSS3：利用現代 CSS 特性實現美觀的樣式布局和交互效果。

代碼實現詳解

1. 樣式設計（<style scoped>部分）

* {margin: 0;padding: 0;box-sizing: border-box;
}
.container {width: 100%;
}
.tabs {width: 100%;display: flex;position: relative;height: 50px;background-color: white;
}
.tabs_label {width: 33.33%;text-align: center;line-height: 50px;cursor: pointer;height: 50px;transition: color 0.3s;
}
.tabs_label.active {color: red;font-weight: bold;
}
.line {width: 10%;height: 3px;position: absolute;bottom: 0;background-color: red;
}
.tab-content {min-height: 200px;
}

通過*選擇器重置瀏覽器默認樣式，使用box-sizing: border-box確保元素尺寸計算更符合預期。.tabs容器作為選項卡導航欄，采用 Flex 布局實現標簽橫向排列。.tabs_label定義標簽樣式，通過:active類控制選中狀態下的顏色和加粗效果，底部的.line用于實現切換時的紅色指示線動畫。?

.start_panda {width: 96%;height: 310px;margin-left: 2%;margin-top: 10px;background-color: white;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.start_img {width: 100%;height: 200px;border-radius: 10px 10px 0 0;object-fit: cover;
}

攻略板塊的樣式中，.start_panda定義攻略卡片整體樣式，通過box-shadow添加陰影效果增強立體感；.start_img確保圖片在卡片頂部完整展示且保持圓角效果。?

.product_list {margin-top: 2%;column-count: 2;column-gap: 10px;flex-wrap: wrap;padding: 10px;gap: 10px;
}
.product_item {break-inside: avoid;margin-bottom: 10px;background-color: #ffffff;border-radius: 5px;
}

游記板塊使用column-count實現多列布局，提升頁面空間利用率，同時通過break-inside: avoid避免卡片內容在列中斷開，保持展示完整性。?

.answers_box {width: 100%;height: 150px;background-color: white;display: flex;justify-content: space-between;border-bottom: 1px solid #e5e5e5;
}

問答板塊的.answers_box采用 Flex 布局，使每個問答項內的元素橫向排列且兩端對齊，通過底部邊框實現問答項之間的視覺分隔。?

2. 模板搭建（<template>部分）?

<template><div class="container"><!-- 選項卡導航 --><div class="tabs"><div class="tabs_label" :class="{ active: activeTab ==='strategy' }" @click="switchTab('strategy')">攻略</div><div class="tabs_label" :class="{ active: activeTab === 'travelNotes' }" @click="switchTab('travelNotes')">游記</div><div class="tabs_label" :class="{ active: activeTab === 'qna' }" @click="switchTab('qna')">問答</div><!-- 底部指示線 --><div class="line" :style="lineStyle"></div></div><!-- 內容區域 --><div class="content"><!-- 攻略的內容區域 --><div v-show="activeTab ==='strategy'" class="tab-content"><!-- 具體攻略內容 --></div><!-- 游記的內容區域 --><div v-show="activeTab === 'travelNotes'" class="tab-content"><!-- 具體游記內容 --></div><!-- 問答的內容區域 --><div v-show="activeTab === 'qna'" class="tab-content"><!-- 具體問答內容 --></div></div></div>
</template>

模板部分通過v-show指令根據activeTab的值控制不同板塊的顯示與隱藏。選項卡標簽綁定click事件，觸發switchTab方法切換當前選中項，底部指示線通過:style綁定計算屬性lineStyle，實現平滑的動畫切換效果。?

3. 邏輯實現（<script setup>部分）?

import { ref, computed } from 'vue';
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();const data = ref(null);
const res_data = ref(null);
const queans_data = ref(null);// 選項卡切換狀態
const activeTab = ref('strategy');
const lineStyle = computed(() => {const positions = {'strategy': '11.5%','travelNotes': '44.5%','qna': '77.5%'};return {left: positions[activeTab.value],transition: 'left 0.3s ease-in-out'};
});
function switchTab(tabName) {activeTab.value = tabName;
}

在 Vue3 的組合式 API 中，使用ref定義響應式數據存儲接口返回的數據和選項卡狀態。computed計算屬性lineStyle根據當前選中的選項卡動態計算指示線的位置，實現動畫切換。switchTab方法用于更新activeTab的值，觸發視圖更新。?

// 發送axios請求
axios({method: "post",url: "/app/intro/index",data: {scenic_id: 2,},
}).then((res) => {console.log(res.data.data);data.value = res.data.data;}).catch((err) => {console.log(err);});// 請求游記列表的接口
axios({method: "post",url: "/app/Travels/index",
}).then((res) => {console.log(res.data.data);res_data.value = res.data.data;}).catch((err) => {console.log(err);});// 請求問答列表的接口
axios({method: "post",url: "/app/Queans/index",
}).then((res) => {console.log(res.data.data);queans_data.value = res.data.data;}).catch((err) => {console.log(err);})

通過 Axios 分別向后端三個接口發起 POST 請求，獲取攻略、游記、問答數據，并將響應數據存儲到對應的ref變量中，驅動頁面數據渲染。?

// 修改后的跳轉函數，接收item參數
const goToDetail = (item) => {router.push({name: "details_page",params: { id: item.id }});console.log(item.id);sessionStorage.setItem('intro_data', JSON.stringify(item));sessionStorage.setItem('intro_id', item.id);
}

goToDetail函數實現點擊具體內容項跳轉到詳情頁的功能，將當前項的 ID 作為路由參數傳遞，并將相關數據存儲到sessionStorage中，方便詳情頁獲取和展示。?

效果展示與優化建議

最終實現的頁面，選項卡切換流暢，各板塊數據展示清晰。后續可從以下方向優化：

1. 性能優化：對圖片進行懶加載處理，減少頁面初始加載時間；對接口請求添加防抖或節流，避免頻繁請求。
2. 交互增強：在選項卡切換時添加更豐富的過渡動畫，優化移動端觸摸交互體驗。
3. 數據處理：增加數據緩存機制，避免重復請求相同數據；對接口返回數據進行更嚴格的格式校驗和錯誤處理。

通過以上步驟，我們成功構建了一個功能完備、界面美觀的旅游攻略選項卡頁面。希望本文能為你的 Vue3 項目開發提供實用參考，助力打造更優質的用戶體驗