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中，方便详情页获取和展示。
效果展示与优化建议
最终实现的页面，选项卡切换流畅，各板块数据展示清晰。后续可从以下方向优化：
- 性能优化：对图片进行懒加载处理，减少页面初始加载时间；对接口请求添加防抖或节流，避免频繁请求。
- 交互增强：在选项卡切换时添加更丰富的过渡动画，优化移动端触摸交互体验。
- 数据处理：增加数据缓存机制，避免重复请求相同数据；对接口返回数据进行更严格的格式校验和错误处理。
通过以上步骤，我们成功构建了一个功能完备、界面美观的旅游攻略选项卡页面。希望本文能为你的 Vue3 项目开发提供实用参考，助力打造更优质的用户体验