Tabbar切换效果(vant)

route 是否开启路由模式
在这里插入图片描述

<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>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/230133.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

“探究HarmonyOS:深入解析鸿蒙操作系统架构”

前言 一、鸿蒙操作系统是什么&#xff1f; 二、为什么要学习鸿蒙操作系统 1.从开发者角度看&#xff1a; 2.从使用者角度看&#xff1a; 总结 前言 随着智能化时代的到来&#xff0c;操作系统的发展也越来越快&#xff0c;人们对于智能化生活的需求也越来越强烈。鸿蒙操作系统作…

LangChain+通义千问+AnalyticDB向量引擎保姆级教程

本文以构建AIGC落地应用ChatBot和构建AI Agent为例&#xff0c;从代码级别详细分享AI框架LangChain、阿里云通义大模型和AnalyticDB向量引擎的开发经验和最佳实践&#xff0c;给大家快速落地AIGC应用提供参考。 前言 通义模型具备的能力包括&#xff1a; 1.创作文字&#xf…

快速学会绘制Pyqt5中的所有图(上)

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…

JavaScript常用技巧专题一

文章目录 一、前言二、生成随机颜色的两种方式2.1、生成RandomHexColor2.2、生成随机RGBA 三、复制内容到剪贴板的两种方式3.1、方式13.2、方式2 四、获取URL中的查询参数五、打乱数组六、深拷贝一个对象七、确保元素在可见区域内八、获取当前选中的文本九、浏览器cookie9.1、获…

探索HarmonyOS开发—Slider滑动条组件

Slider Slider 滑块组件 Slider({min: 0, // 最小值max: 350, // 最大值value: 30, // 当前值step:10, // 滑动步长style:SliderStyle.OutSet, // Inset 滑块的位置direction:Axis.Horizontal, // Verticalreverse:false // 是否反向滑动 }) style属性可以控制滑块在整个滑块…

【数值计算方法(黄明游)】解线性代数方程组的迭代法(一):向量、矩阵范数与谱半径【理论到程序】

文章目录 一、向量、矩阵范数与谱半径1、向量范数a. 定义及性质补充解释范数差 b. 常见的向量范数 l 1 l_1 l1​、 l 2 l_2 l2​、 l ∞ l_\infty l∞​ 范数性质关系 2、矩阵范数a. 矩阵的范数b. 常见的矩阵范数相容范数算子范数 3、谱半径4、知识点总结1. 向量范数2. 矩阵范数…

Dexie 查询sql速度优化

Dexie查询速度慢的原因主要一个优化点是复杂查询下的count执行。 以下摘自Dexie官方文档&#xff1a;https://dexie.org/docs/Collection/Collection.count() If executed on simple queries, the native IndexedDB ObjectStore count() method will be called (fast execution…

PPT插件-好用的插件-字距快速设置-大珩助手

字距快速设置 包含两端对齐、段首缩进、取消缩进、字间距、行间距、段后距 段首缩进 每次缩进两个字符&#xff0c;可对选中的文字、选中的多个文本对象两个层级操作 取消缩进 将缩进取消&#xff0c;可对选中的文字、选中的多个文本对象两个层级操作 字间距 预设了常用…

网页设计--第6次课后作业

试用Vue相关指令完成对以下json数据的显示。显示效果如下&#xff1a; 其中&#xff1a;gender1 显示为女&#xff0c;gender2显示为男。价格超过30元&#xff0c;显示“有点小贵”。价格少于等于30元&#xff0c;则显示“价格亲民”。 data: {books: [{"id": "…

【软件安装】VMware安装Centos7虚拟机并且设置静态IP,实现Windows和Centos7网络互相访问

这篇文章&#xff0c;主要介绍VMware安装Centos7虚拟机并且设置静态IP&#xff0c;实现Windows和Centos7网络互相访问。 目录 一、VMware安装Centos7 1.1、下载Centos7镜像 1.2、安装Centos7系统 二、设置静态IP地址 2.1、查看虚拟机网络IP 2.2、禁用NetworkManager服务 …

PandoraFMS 监控软件 SQL注入漏洞复现

0x01 产品简介 Pandora FMS是西班牙Artica公司的一套监控系统。该系统通过可视化的方式监控网络、服务器、虚拟基础架构和应用程序等。 0x02 漏洞概述 Pandora FMS监控软件存在SQL注入漏洞,攻击者通过chart_generator.php 来执行恶意语句,获取数据库敏感信息。 0x03 复现…

机器学习之全面了解回归学习器

我们将和大家一起探讨机器学习与数据科学的主题。 本文主要讨论大家针对回归学习器提出的问题。我将概要介绍&#xff0c;然后探讨以下五个问题&#xff1a; 1. 能否将回归学习器用于时序数据&#xff1f; 2. 该如何缩短训练时间&#xff1f; 3. 该如何解释不同模型的结果和…

拦截 open调用 (进程白名单,文件白名单)

拦截 open 文章目录 拦截 open第一个需求文件结构进程白名单文件白名单 测试代码第一个版本版本二代码演示 增加一个日志记录代码解释 gcc -shared -fPIC -o libintercept.so intercept.c -ldlLD_PRELOAD./libintercept.so ./processA在Linux中&#xff0c;我们可以使用LD_PREL…

RT-DETR优化:Backbone改进 | UniRepLKNet,通用感知大内核卷积网络,RepLK改进版本 | 2023.11

🚀🚀🚀本文改进: UniRepLKNet,通用感知大内核卷积网络,ImageNet-22K预训练,精度和速度SOTA,ImageNet达到88%, COCO达到56.4 box AP,ADE20K达到55.6 mIoU 🚀🚀🚀RT-DETR改进创新专栏:http://t.csdnimg.cn/vuQTz 学姐带你学习YOLOv8,从入门到创新,轻轻松松…

无人机高空巡查+智能视频监控技术,打造森林防火智慧方案

随着冬季的到来&#xff0c;森林防火的警钟再次敲响&#xff0c;由于森林面积广袤&#xff0c;地形复杂&#xff0c;且人员稀少&#xff0c;一旦发生火灾&#xff0c;人员无法及时发现&#xff0c;稍有疏忽就会酿成不可挽救的大祸。无人机高空巡查智能视频监控是一种非常有效的…

库卡LBR_iisy_3_R760协作机器人导入到coppeliasim

1.从库卡官网xpert下载模型 一般载都是这个step文件格式&#xff0c;其他的好像不太好用。coppeliasim导入格式用的是stl,需要用freeCAD打开重新转换一下。下载下来后&#xff0c;很多都是一个整体&#xff0c;在freeCAD导入中&#xff0c;导入选择要不勾选合并。 下载完用CAD …

Day54力扣打卡

打卡记录 出租车的最大盈利&#xff08;动态规划&#xff09; 链接 class Solution:def maxTaxiEarnings(self, n: int, rides: List[List[int]]) -> int:d defaultdict(list)for start, end, w in rides:d[end].append((start, end - start w))f [0] * (n 1)for i in…

linux进入emergency mode

问题描述 linux系统进入emergency mode模式 解决方法 查看问题原因 journalctl -xb -p3 使用fsck 不一定是sda2&#xff0c;也可能是其他&#xff0c;我的是/dev/sda6&#xff0c;然后接受所有的option&#xff0c;完毕后重启电脑 fsck /dev/sda2接受所有的选项&#xff…

华为配置Smart Link主备备份示例

定义 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 Monitor Link是一种接口联动方案&#xff0c;它通过监控设备的上行接口…

Leetcode—2646.最小化旅行的价格总和【困难】

2023每日刷题&#xff08;五十三&#xff09; Leetcode—2646.最小化旅行的价格总和 算法思想 看灵神的 实现代码 class Solution { public:int minimumTotalPrice(int n, vector<vector<int>>& edges, vector<int>& price, vector<vector&l…