【Uniapp-Vue3】tabBar设置底部菜单选项及iconfont图标

最新推荐文章于 2025-07-01 17:52:55 发布
原创 最新推荐文章于 2025-07-01 17:52:55 发布 · 851 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端

我们在pages中创建了3个页面，分别是首页页面，分类页面和用户页面，我们把这三个页面设置为底部菜单选项切换。

 在pages.json中可以看到创建的三个页面的信息：

设置底部菜单：

在pages.json中创建一个“tabBar”项，其中配置list数组，数组中是每一个底部菜单项的配置：

底部菜单栏配置成功。 

 

也可以对底部菜单栏的样式进行配置：

 

uni-app菜单tabbar（十四）
A_nanda的博客
06-28 973
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用custom-tab-bar组件来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
如何从零开始拆解uni-app开发的vue项目（一）
A_nanda的博客
03-19 1522
如果您囊肿羞涩也没有关系，希望您点个关注，写点评论；别看只有一句代码，这句的意思是将用户名放入到global中，这个后期可做全局对象处理页面之间的权限验证等功能，按住alt+鼠标左键可以看到，对应的文件config.js。fail: () => {console.log('登录失败'+this.username+this.password);一番操作之后，我下载了HBuilder X之后，运行项目其实也不是很顺利，因为这个编译器虽然是免安装的，但是运行之后就会提示缺少运行的插件，还好都是无脑安装。
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2843
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 3530
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
uniapp 3分钟搞掂底部菜单栏的开发
m0_37364725的博客
12-20 569
uniapp 3分钟搞掂底部菜单栏的开发
uniapp中tabBar使用iconfont图标
2401_83213163的博客
03-16 1071
2、在小程序中使用需要下载成png格式保存到本地后，复制到sta​​​​​​​tic中，用iconpath调用即可。
iconfont 图标如何在uniapp中的tabBar使用
qq_40259123的博客
02-20 8206
iconfont 图标如何在uniapp中的tabBar使用
uni-app学习---项目搭建、配置、设置导航栏
ChenLingZhi1115的博客
06-04 2727
uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。总：编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、h5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台。
uniapp入门超详细教程：如何从零开始搭建项目
热门推荐
weixin_51609337的博客
07-19 2万+
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。
vue uniapp 自定义导航栏
03-28
console.log('显示菜单选项'); // 展开下拉菜单或其他交互逻辑 } } }; .custom-navbar { height: 88rpx; /* 微信小程序默认状态栏高度 */ line-height: 88rpx; background-color: #fff; box-shadow: 0 2...
uniapp tabBar使用iconfont 字体图标
weixin_41623830的博客
05-07 1万+
&#xe 改为 \ue, 例如: "text": "\ue783" "tabBar":{ "iconfontSrc":"./static/font/iconfont.ttf", "list":[ { "text":"书架", "pagePath":"pages/index/index", "iconfont": { "text": "\ue610", "selectedTe
uniapp中使用iconfont图标库
m0_52364694的博客
09-08 411
分三步 一、下载所需的iconfont图标，并解压到uniapp项目common文件夹下(没有common文件夹可以新建一个) 二、mian.js中引入，引入代码 import ‘./common/解压后的文件夹名/iconfont.css’。 这里的"解压后的文件夹名"需要根据你自己解压文件来确定，每次下载iconfont图标都会不一样 三、使用 pages/index/index.vue中测试代码 ...
uniapp项目tabbar使用icon font(图标字体)时真机显示异常问题
最新发布
urnotuname的博客
07-01 787
注：我这项目用icomoon，并且资源目录比较长，不用参考我的资源路径配置。
uniapp导航栏使用iconfont
EvaY_Yang的博客
08-23 1649
uniapp导航栏使用iconfont来配置多个按钮。
uniapp tabbar国际化 动态自定义icon 文字 调整顺序 以及其他自定义需求
qq_42076140的博客
02-07 1466
uniapp自带的tabbar 不支持动态的更换 icon 文字 顺序 以及其他自定义需求 uni.setTabBarItem(OBJECT) 只能在页面加载的时候才生效 很gay 自定义的又性能不好尤其H5不能缓存页面可以自定义的+隐藏自带tabbar实现（uni.hideTabBar(OBJECT)） 思路： 首先需要把tabbar可能存在的页面在pages配置好 根据接口和UI写一个组件 根据接口隐藏显示等实现其他需求 在这些页面onload里隐藏tabbar（hideTab...
uniapp 引入icon，tabBar使用icon
weixin_45289656的博客
09-19 4604
uniapp 引入icon，tabBar使用icon
uni-app中使用iconfont字体图标教程
LW0512的博客
07-20 1359
uniapp tabbar配置 iconfont app.vue
uni-app 怎么在tabbar使用阿里图标库
m0_75269526的博客
06-15 1274
uni-app使用阿里巴巴矢量图标库，uniapp设置tabbar,uniapp提示：微信小图标不支持使用字体图标的方式，只能下载png。
uniapp引入inconfont自定义导航栏
qq_55272229的博客
08-05 2205
2.将css文件复制粘贴项目的公共css目录和ttf文件导入static目录。2.下载到本地解压后,将其中的ttf文件,放在static静态目录下。3.在page.json中对全局文件进行配置tabBar(导航图标)4.此时就可以在list对导航item添加iconfont属性。1.同上下载到本地,但是需要在项目设置中把base64码下载。uniapp本身的全局设置中有个iconfontsrc属性。1.iconfont将需要的icon添加至项目。4.app.vue进行全局css样式导入。
uniapp vue3 u-tabbar
09-05
uni-app 是一款基于 Vue.js 的跨平台应用开发框架，它支持快速构建原生应用，包括 iOS、Android 和 Web。Vue3 是 Vue 框架的最新版本，提供更高效的性能和更好的 TypeScript 支持。 u-tabbar 是 uni-app 内置的一个组件，专门用于实现底部导航栏的功能。它通常包含多个 tabBarItem 元素，每个代表一个页面或功能模块。开发者可以在 Vue 3 中使用 u-component 这个官方指令来导入和使用这个组件，它的属性可以配置如标签名称、路径、图标等，并且可以通过动态路由和 Vue Router 来管理不同的视图切换。 例如，在 Vue 文件中，你可能会这样使用 u-tabbar： ```html <template> <u-tabbar v-model="activeIndex" :navigator-style="navigatorStyle"> <u-tabbar-item icon="path/to/icon1" text="首页" :path="&#39;/home&#39;"></u-tabbar-item> <!-- 更多 tabbar item... --> </u-tabbar> </template> <script setup> import { ref } from &#39;vue&#39;; const activeIndex = ref(0); const navigatorStyle = { // 风格设置，比如 &#39;card&#39;, &#39;default&#39; }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值