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

在旅游类应用开发中，为用户提供全面、直观的信息展示界面至关重要。本文将分享如何基于 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 项目开发提供实用参考，助力打造更优质的用户体验