Vue 的TabBar点击实现照片和页面切换

最新推荐文章于 2025-05-25 11:43:26 发布

原创最新推荐文章于 2025-05-25 11:43:26 发布 · 794 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏收录该内容

1 篇文章

订阅专栏

本文指导如何在Vite项目中正确引用本地图片资源，提倡直接使用本地路径，并演示了如何通过点击切换组件显示不同状态的图片。同时介绍了tab栏组件的实现和路由跳转技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、本地模拟数据建议不要用@来进行引入，直接调用本地的地址，即 ../../assets/.../.../...png

<template>
  <div class="tab-bar">
    <template v-for="(item, index) in tabbarData" :key="index">
      <div class="tab-bar-item" 

             <!-- 文字颜色的变化 -->
           :class="currentIndex===index? 'active': ' '"

             <!-- 事件点击 来切换路由和当前的index-->
           @click="itemClick(item,index)"  >

           <!-- 直接使用if 来进行渲染不同的照片 实现切换效果 -->
           <!-- 因为使用的vite来进行开发 所以需要对静态本地照片进行处理 -->

          <img v-if=" currentIndex !== index " :src="getNewURL(item.image)"  />

          <img v-else :src="getNewURL(item.imageActive)"  />

          <span>{{ item.text }}</span>

      </div>
    </template>
  </div>
</template>

<script setup>
import { getNewURL } from "@/utils/getAssertImage";
import { ref } from "@vue/reactivity";

import { useRouter } from "vue-router";
const router = useRouter();
// 动态记录目前点击的位置
let currentIndex = ref(0)

const tabbarData = [
  {
    text: "首页",
    image: "tabbar/tab_home.png",
    imageActive: "tabbar/tab_home_active.png",
    // 路由跳转
    path: "/home",
   
  },
  {
    text: "收藏",
    image: "tabbar/tab_favor.png",
    imageActive: "tabbar/tab_favor_active.png",
    // 路由跳转
    path: "/favor",
  
  },
  {
    text: "订单",
    image: "tabbar/tab_order.png",
    imageActive: "tabbar/tab_order_active.png",
    // 路由跳转
    path: "/order",
  
  },
  {
    text: "消息",
    image: "tabbar/tab_message.png",
    imageActive: "tabbar/tab_message.png",
    // 路由跳转
    path: "/message",
    
  },
];

  function itemClick(item,index){

    currentIndex.value = index

    router.push(item.path);

  }

</script>

<style  scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;

  border-top: 1px solid #f3f3f3;
}
.tab-bar-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 纵向排列 */
  flex-direction: column;
}
.tab-bar-item img {
  width: 32px;
}
.tab-bar-item span {
  margin-top: 3px;
  font-size: 12px;
}
.active{
  color: #FF9645;
}
</style>