安装 vant-ui 实现底部导航栏 Tabbar
本例子使用vue3
介绍 vant-ui
地址:介绍 - Vant 4 (vant-ui.github.io)
Vant 是一个轻量、可定制的移动端组件库
安装
通过 npm 安装:
# Vue 3 项目,安装最新版 Vant
npm i vant# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2
通过
yarn、pnpm或bun进行安装:# 通过 yarn 安装
yarn add vant# 通过 pnpm 安装
pnpm add vant# 通过 Bun 安装
bun add vant
使用
在新项目中使用,推荐使用 Rsbuild,Vite 或 Nuxt 框架。
官方示例项目
以下是 Vant 官方提供的一些示例项目,你可以克隆该项目,并直接拷贝代码来使用。
- vant-demo - rsbuild:使用 Vue 3、Vant 4、Rsbuild 搭建应用
- vant-demo - vite:使用 Vue 3、Vant 4、Vite 搭建应用
- vant-demo - nuxt3:使用 Vue 3、Nuxt 3、Vant 4 搭建应用。
引入组件
常规用法
//src\main.ts //引入组件样式 import 'vant/lib/index.css'const app = createApp(App) app.mount('#app')//src\views\tabs\TabsView.vue <script setup lang="ts"> //引入你需要的组件 import { Tabbar, TabbarItem } from 'vant' import { ref } from 'vue'//记录当前选择的 tab const active = ref('home')</script><template><div class="center">{{ active }}</div><Tabbar v-model="active"><TabbarItem name="home" icon="home-o">首页</TabbarItem><TabbarItem name="order" icon="bars">订单</TabbarItem><TabbarItem name="me" icon="contact">我的</TabbarItem></Tabbar> </template><style> .center {text-align: center; } </style>//src\App.vue <script setup lang="ts"> // 展示组件 import TabsView from './views/tabs/TabsView.vue'; </script><template><TabsView></TabsView> </template>非常规用法,即按需引入方法,请去官网查看
效果

相关文章:
安装 vant-ui 实现底部导航栏 Tabbar
本例子使用vue3 介绍 vant-ui 地址:介绍 - Vant 4 (vant-ui.github.io) Vant 是一个轻量、可定制的移动端组件库 安装 通过 npm 安装: # Vue 3 项目,安装最新版 Vant npm i vant # Vue 2 项目,安装 Vant 2 npm i vantlatest-v…...
GitHub国内打不开(解决办法有效)
最近国内访问github.com经常打不开,无法访问。 github网站打不开的解决方法 1.打开网站http://tool.chinaz.com/dns/ ,在A类型的查询中输入 github.com,找出最快的IP地址。 2.修改hosts文件。 在hosts文件中添加: # localhost n…...
Unity之第一人称角色控制
目录 第一人称角色控制 😴1、准备工作 📺2、鼠标控制摄像机视角 🎮3、角色控制 😃4.杂谈 第一人称角色控制 专栏Unity之动画和角色控制-CSDN博客的这一篇也有讲到角色控制器,是第三人称视角的,以小编…...
23种设计模式-结构型模式
1.代理模式 在软件开发中,由于一些原因,客户端不想或不能直接访问一个对象,此时可以通过一个称为"代理"的第三者来实现间接访问.该方案对应的设计模式被称为代理模式. 代理模式(Proxy Design Pattern ) 原始定义是:让你能够提供对象的替代品或其占位符。…...
python -- 流程控制
1、if控制语句:语法格式: age 20 if age > 18:print("我不是小孩子") elif age < 18:print("你永远都是小孩子") else:print("你永远都是小孩子") 2、while循环语句:语法格式: age1 30 …...
Centos 7.9 在线安装 VirtualBox 7.0
1 访问 Linux_Downloads – Oracle VM VirtualBox 2 点击 the Oracle Linux repo file 复制 内容到 /etc/yum.repos.d/. 3 在 /etc/yum.repos.d/ 目录下新建 virtualbox.repo,复制内容到 virtualbox.repo 并 :wq 保存。 [rootlocalhost centos]# cd /etc/yum.rep…...
mysql之基本查询
基本查询 一、SELECT 查询语句 一、SELECT 查询语句 查询所有列 1 SELECT *FORM emp;查询指定字段 SELECT empno,ename,job FROM emp;给字段取别名 SELECT empno 员工编号 FROM emp; SELECT empno 员工编号,ename 姓名,job 岗位 FROM emp; SELECT empno AS 员工编号,ename …...
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之DataPanel组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之DataPanel组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、DataPanel组件 数据面板组件,用于将多个数据占比情况使用占比图进…...
qt5-入门
参考: qt学习指南 Qt5和Qt6的区别-CSDN博客 Qt 学习之路_w3cschool Qt教程,Qt5编程入门教程(非常详细) 本地环境: win10专业版,64位 技术选择 Qt5力推QML界面编程。QML类似HTML,可以借助CSS进…...
【重磅发布】已开放!模型师入驻、转格式再升级、3D展示框架全新玩法…
1月23日,老子云正式发布全新版本。此次新版本包含多板块功能上线和升级,为用户带来了含模型师入驻、三维格式在线转换升级、模型免费增值权益开放、全新3D展示框架等一系列精彩内容! 1月23日,老子云正式发布全新版本。此次新版本…...
Qt 基础之QDataTime
Qt 基础之QDataTime 引言一、获取(设定)日期和时间二、时间戳三、时间计算 (重载运算符) 引言 QDataTime是Qt框架中用于处理日期和时间的类。它提供了操作和格式化日期、时间和日期时间组合的功能。QDataTime可以用于存储和检索日期和时间、比较日期和时间、对日期和时间执行算…...
美国将限制中国,使用Azure、AWS等云,训练AI大模型
1月29日,美国商务部在Federal Register(联邦公报)正式公布了,《采取额外措施应对与重大恶意网络行为相关的国家紧急状态》提案。 该提案明确要求美国IaaS(云服务)厂商在提供云服务时,要验证外国…...
智能指针|巨巨巨详细
智能指针 shared_ptrshared_ptr的基本用法使用shared_ptr要注意的问题 unique_ptr独占的智能指针weak_ptr弱引用的智能指针weak_ptr的基本用法weak_ptr返回this指针weak_ptr解决循环引用问题 weak_ptr使用注意事项 智能指针 C程序设计中使用堆内存是非常频繁的操作࿰…...
硬件知识(2) 手机的传感器-sensor
#灵感# 看看小米在干啥 手机型号:Redmi Note 13 Pro,解读一下它宣传的手机卖点。 目录 宣传1:1/1.4" 大底,f/1.65 大光圈, 宣传2:支持 2 亿像素超清直出,分辨率高达 16320 x 12240 宣…...
Kotlin快速入门系列9
Kotlin对象表达式和对象声明 对象表达式 有时,我们想要创建一个对当前类有些许修改的对象同时又不想重新声明一个子类。如果是Java,可以用匿名内部类的概念来解决这个问题。kotlin的对象表达式和对象声明就是为了实现这一点(创建一个对某个类做了轻微改…...
nginx+nginx-rtmp-module+ffmpeg进行局域网推流rtmp\m3u8
局域网推流的简单方式 这里以ubuntu为例 一、先下载安装包 nginx、nginx-rtmp-module,再一起安装 # 下载nginx # 这里我安装的是 nginx-1.10.3 版本 cd /usr/software wget http://nginx.org/download/nginx-1.25.0.tar.gz tar -zxvf nginx-1.25.0.tar.gz# 下载ng…...
PMP备考笔记:模拟考试知识点总结
1. 答题思路:优先看问题,可节省时间。 2. 考试就按照考试的套路来做,不要过多考虑。 开发团队只专注当前冲刺目标,产品负责人对PB排优先级。 收集需求工具-原型法:能够让用户提前体验,减少返工的风险。 …...
docker程序镜像的安装
目录 一、流程 二、总结 一、 流程 对文中脚本测试前提默认系统已安装docker docker程序部署命令脚本 加载已打包的docker程序 docker load < sto...p.tar创建网络 名称为c…m子网subnet 172.27.16.1/24网关gateway 172.27.16.254-d 指定网络驱动程序 docker network cre…...
openssl3.2 - .pod文件的查看方法
文章目录 .pod文件的查看方法概述笔记初步的解决方法备注 - pod2html.bat的详细用法好像Perl就自带这个BATEND .pod文件的查看方法 概述 看到openssl源码目录下有很多.pod文件, 软件发布的帮助内容都在里面. 当make install后, 大部分的.pod都会转成html文件, 但是有一部分…...
力扣238. 除自身以外数组的乘积(前后缀和)
Problem: 238. 除自身以外数组的乘积 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1: 1.先求取数组的包括当前下标值得前后缀乘积(利用两个数组记录下来分别为leftProduct和rightProduct) 2.当求取一个下标为i的数组中的元素&#x…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...
