Vue3 实战：打造多功能旅游攻略选项卡页面

在旅游类应用开发中，为用户提供全面、直观的信息展示界面至关重要。本文将分享如何基于 Vue3 + Axios 技术栈，实现一个包含攻略、游记、问答三大板块的旅游攻略选项卡页面，从样式设计到交互逻辑，带你深入了解整个开发过程。

项目背景与需求分析

随着旅游行业的数字化转型，用户对于景区信息获取的需求日益多样化。游客不仅希望了解景区的游玩攻略、动物分布，还想查看其他游客的真实游记以及专业问答。因此，需要构建一个集多类型内容展示、交互跳转于一体的页面，通过选项卡形式高效组织信息，提升用户体验。

技术栈解析

Vue3：采用 Vue3 的响应式系统和组合式 API，简化组件逻辑，提高开发效率和代码可读性。
Axios：用于发起 HTTP 请求，从后端接口获取攻略、游记、问答等数据。
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中，方便详情页获取和展示。