uniapp 引入icon，tabBar使用icon

已于 2022-10-25 13:54:32 修改
阅读量4k 收藏 17
点赞数 2
分类专栏： uniapp view 文章标签： uni-app vue.js 前端
于 2022-09-19 16:40:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45289656/article/details/126936244
版权
view 同时被 2 个专栏收录
17 篇文章 1 订阅
订阅专栏
uniapp
3 篇文章 0 订阅
订阅专栏

阿里巴巴图标库下载完之后把文件夹放到项目中，我这里放到了static下的icon中

在这里插入图片描述
然后在iconfont.css文件中需要修改一下路径，不然会报错，找不到文件

在这里插入图片描述
我这边是在app.vue中引入的

在这里插入图片描述

然后在单独文件中使用即可

如果是在tabBar中使用，则需要在tabBar单独使用iconfontSrc引入

然后text中的编码需要改一下

前面要添加一个u

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

小疯仔
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
uniapp小程序tabbar图标
07-25
uniapp小程序tabbar整套图标，包含选中和非选择的
【uni-app】app界面TabBar中间大图标设置的两种方法：midButton的使用；iconfont的使用
aDiaoYa_的博客
06-09 7833
最近在写app的时候，需要将tabbar导航栏中间的发布按钮设置为大图标，于是就和我另一个伙伴一起研究这个功能。有两种实现方式：①通过设置midButton属性放大图标，通过调用实现页面跳转；②通过设置对应的iconfont属性，将图标转换为字体图标。具体实现如下。
uniApp自定义tabBar底部导航栏+实现tabBar中间凸起自定义样式
最新发布
weixin_52830464的博客
05-28 684
pages.js 添加 "custom": true 属性。
uniapp自定义tabBar
热门推荐
weixin_45785873的博客
03-25 5万+
uniapp自定义tabBar方案 该方案解决的问题有： 1、不在同一个页面切换组件，可路由跳转，刷新页面显示该路由下的页面信息 2、首次
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 2291
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
uniapp 解决tabBar增加图标问题
SSophia的博客
11-09 2542
uniapp开发app tabbar 首页字体和图标问题
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 1122
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
uniapp字体图标的使用
12-31
1. 在uniapp组件中，我们可以通过`<u-icon>`组件来使用字体图标，例如： ```html <u-icon name="logo-ionicons" size="30" color="#007aff"></u-icon> ``` 这里的`name`属性对应字体库中的图标名称，`size`表示图标...
uniapp自定义tabbar图标样式
10-13
1. **自定义图标**：默认情况下，uniAPP的tabbar使用的是系统字体图标。我们可以通过设置`list`属性来自定义图标，每个条目包含`text`（文本）和`iconPath`（未选中状态的图标路径）以及`selectedIconPath`（选中...
uniapp 微信小程序tabbar凸起的显示
08-25
`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的...
uniapp小程序自定义动态tabbar
04-08
- 引入并使用自定义TabBar组件：在需要使用TabBar的页面中引入并注册组件，然后在页面模板中使用。 ```html <!-- 页面内容 --> <tabbar></tabbar> import Tabbar from '@/components/tabbar.vue'; export...
微信小程序设置 tabbar icon 大小
资深全栈开发工程师
07-09 1万+
将 tabbar icon 图片制作成合适的尺寸：你可以使用设计工具（如 Photoshop、Sketch 等）将图标调整为合适的大小。在 app.json 文件中设置 tabbar 图标大小：在 app.json 文件的 tabBar 字段中设置 iconSize 属性，可以控制 tabbar 图标的大小。因此，建议根据实际需求和设计准则选择合适的图标大小，并进行适当的调整。在上面的示例中，iconSize 属性被设置为 48，这将使 tabbar 图标的大小为 48x48 像素。
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
i_am_a_div的博客
07-21 2万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
uniapp 自定义底部导航栏
weixin_50606255的博客
09-02 1万+
在做项目时，经常遇到在现有的框架中无法实现UI图上的样式，比如说将底部导航栏的字体在选中状态下变为渐变色，在浏览器上可以直接修改css样式，但是运行到真机时才发现根本不生效，查阅官方文档才发现app端的根本不支持这些属性更改 下面是我在项目中做底部导航栏的过程 1.首先是用的官方的底部导航栏，具体可以看我的这篇文档https://blog.csdn.net/weixin_50606255/article/details/116270949 在用这个底部导航栏时，就无法更改字体颜色为渐变色（app端）
一课一得：uniApp--tabBar的使用
fyvhhf的博客
06-14 5971
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。在编写uni项目是，如果应用是一个多tab应用，我们可以通过tabBar配置项指定一级导航栏。以及tab切换时显示的对应页。，不能使用uni.navigateTo、uni.redirectTo；该json格式里，tabBar下面的属性。
在uni.app中引入并在底部导航栏中使用icon字体图标
weixin_46254090的博客
09-27 1997
icon在uni.app中tabbar的用法
uniapp如何实现tabbar中间加突出效果的图标（App）
2301_77742545的博客
11-12 1585
dock 原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；mask 原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；zindex 原生子窗体的窗口的堆叠顺序值，拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。
设置tabber角标 icon
weixin_44286765的博客
03-30 259
【代码】设置tabber角标 icon。
如何自定义Tab Icon和图标组件？
Towify的博客
11-18 385
本文详细介绍了在小程序里自定义Tab Icon和图标组件的步骤。 欢迎大家使用我们的无代码开发平台 Towify 制作自己的小程序。
uniapp自定义底部tabbar
07-12
在UniApp中，可以通过自定义底部TabBar来实现自定义的底部导航栏。以下是一些步骤来实现自定义底部TabBar： 1. 创建一个底部TabBar组件：在components文件夹中创建一个名为TabBar的组件，用于显示底部导航栏的内容。 2. 在App.vue中引入TabBar组件：在App.vue文件中引入TabBar组件，并在页面中使用该组件。 3. 定义底部导航栏的数据：在TabBar组件中定义一个数组，包含每个底部导航栏的图标、文字等信息。 4. 使用循环渲染底部导航栏：在TabBar组件的template中使用v-for指令，循环渲染每个底部导航栏项。 5. 添加点击事件：为每个底部导航栏项添加点击事件，用于切换页面或执行其他操作。 6. 在页面中使用自定义底部TabBar：在需要显示底部导航栏的页面中，使用自定义的底部TabBar组件。 以下是一个简单的示例代码： ```vue <!-- TabBar.vue --> <template> <view class="tab-bar"> <view v-for="(item, index) in tabBarList" :key="index" class="tab-bar-item" :class="{ active: activeIndex === index }" @click="handleTabClick(index)" > <image :src="item.icon" class="tab-bar-icon" /> <text class="tab-bar-text">{{ item.text }}</text> </view> </view> </template> <script> export default { data() { return { tabBarList: [ { icon: 'home.png', text: '首页' }, { icon: 'category.png', text: '分类' }, { icon: 'cart.png', text: '购物车' }, { icon: 'user.png', text: '我的' }, ], activeIndex: 0, }; }, methods: { handleTabClick(index) { this.activeIndex = index; // 执行切换页面或其他操作 }, }, }; </script> <!-- App.vue --> <template> <view class="app"> <router-view /> <TabBar /> </view> </template> <script> import TabBar from '@/components/TabBar.vue'; export default { components: { TabBar, }, }; </script> ``` 在以上示例中，TabBar组件循环渲染了底部导航栏的每个项，并通过点击事件切换页面或执行其他操作。在App.vue中使用了TabBar组件，并在页面中显示底部导航栏。 你可以根据自己的需求，对TabBar组件进行样式和功能的定制，以满足自定义底部TabBar的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值