Tabbar切换效果(vant)

route 是否开启路由模式

html 复制代码
<template>
  <div class="layout-page">
    <!-- 二级路由出口 -->
    <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item to="/home">
        首页
          <!-- 图标切换为active是高亮 -->
        <template #icon="{ active }">
            <!-- 封装好的 -->
          <cp-icon :name="`home-index-${active ? 'active' : 'default'}`" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/notify">
        消息
        <template #icon="{ active }">
          <cp-icon :name="`home-notice-${active ? 'active' : 'default'}`" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        我的
        <template #icon="{ active }">
          <cp-icon :name="`home-mine-${active ? 'active' : 'default'}`" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>



相关推荐
Ankkaya几秒前
开发小结(08.11-08.16)
前端·uni-app
Hilaku1 分钟前
前端监控实战:从性能指标到用户行为,我是如何搭建监控体系的
前端·javascript·性能优化
咖啡の猫2 分钟前
Shell脚本-影响shell程序的内置命令
前端·chrome·bash
sorryhc15 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia23 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Mintopia23 分钟前
🎬《Next 全栈 CRUD 的百老汇》
前端·后端·next.js
AryaNimbus39 分钟前
你不知道的Cursor系列:如何使用Cursor同时开发多项目?
前端·ai编程·cursor
国家不保护废物43 分钟前
Function Call与MCP:给AI插上连接现实的翅膀
前端·aigc·openai
500佰43 分钟前
阿里Qoder AI 新开发工具,长期记忆、Wiki和Quest模式是它的独有特性
前端
Juchecar44 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js