uniapp icons图标不显示的问题解决

最新推荐文章于 2024-08-31 22:46:18 发布
最新推荐文章于 2024-08-31 22:46:18 发布
阅读量321 收藏
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyz246859/article/details/141427426
版权

在这里插入图片描述
如图所示 在uniapp开发中 突然发现icons组件不显示图标了 ，而且没什么报错 这是为什么 其实这最大的原因就是你上面的代码在取值上没有做好null的判断 导致参数取值报错 因此影响了页面正常的渲染 导致下面的图标都不显示

lyz246859
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp uni-icons组件自定义图标
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-02 2047
uniapp-uni-icons组件自定义图标，使用uni-icons增加自定义图标 1.1 准备图标 这里我使用的是阿里图标库,找到项目所需图标后,下载下来备用(可以是svg、ttf、img等等)
uniapp字体图标的使用
12-31
字体图标（Font Icons）是通过将图标转化为字体文件来实现的，它们以Unicode编码的方式存储，可以像文字一样调整大小、颜色和位置，而且不受分辨率影响，适用于各种屏幕尺寸和设备。在uniapp中，我们可以借助第三方...
uni-app uni-icons图标不显示问题
2201_75783276的博客
03-30 6334
这项改成false。
uniapp 内置图标 不显示 ，引入的iconfont冲突造成
weixin_55333190的博客
01-22 1383
就像这样 因为类名都带了icon 解决办法就是 加个- 这样就好了
uniapp 解决tabBar增加图标问题
SSophia的博客
11-09 2592
uniapp开发app tabbar 首页字体和图标问题
修复 uni-icons 自定义图标无法显示的问题
ZhangLei280的博客
12-22 2840
uni-app uni-icons H5端无法显示的问题
uniapp组件-uni-icons 图标
热门推荐
02-28 3万+
例子 <template> <view> <uni-icons type="arrowdown"/> <uni-icons type="arrowleft" color="#007aff" /> <uni-icons type="arrowright" color="#007aff" size="25" /> </view> </template> 效果图 如果想要换图标，只需要将type值改为.
解决uniapp App端iconfont图标显示异常问题
我的博客
04-14 2262
原来的iconfont.css： @font-face { font-family: "iconfont"; /* Project id 2762712 */ src: url('iconfont.woff2?t=1631523743638') format('woff2'), url('iconfont.woff?t=1631523743638') format('woff'), url('iconfont.ttf?t=1631523743638') format(
uniapp 使用自定义icon图标
黎小小的博客
05-29 5213
注意如果时vue3需要 slot用在节点中。
uniapp引入自定义图标
weixin_52102740的博客
07-24 609
uniapp自定义图标
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
08-31
5. **清除缓存**：浏览器可能会缓存旧的CSS或字体文件，尝试清除浏览器缓存或使用隐私浏览模式查看是否解决问题。 6. **检查浏览器兼容性**：不同的浏览器对Web字体的支持程度不同，确保所使用的浏览器支持Web字体...
【uniapp 解决h5 uni.saveFile 不生效】2种方法解决
weixin_49066399的博客
08-30 301
用uni.saveFile h5报错。第二种 可以引用js第三方库来进行保存。先安装 file-saver。查看文档发现不支持h5。
uni-app中分页器的实现
weixin_51480428的博客
08-27 530
刚进页面的时候，接收上一个页面传递过来的查询参数，此时调用后端查询接口，这时候的pageSize和pageNum值是固定的，默认查询第一页，同时将数据总条数设置给total，组件会自动根据你设置的pageSize大小和后端查询出的total计算出总的页数。后面就是用户点击上一页或者下一页按钮来触发change函数，传来当前的页数，你再去调用接口查询当前页码的数据即可。
【uniapp重大bug】uni-data-select的localdata改变，也会触发@change方法
yan1915766026的博客
08-29 759
uniapp重大bug，uni-data-select的localdata改变了，也会触发@change方法，并附解决方案
uniapp按钮点击过快导致请求数据混乱
m0_49014420的博客
08-27 397
uniapp按钮点击过快导致请求数据混乱
uniapp scroll-view滚动触底加载 height高度自适应
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-30 519
uniapp 的组件scroll-view在实现触底加载的功能的时候，首先在App上可以滚动，就必须设置高度；触底加载的动态效果，会发起网络请求的，不用设置height，通过css设置min-height:0
uniapp二维码生成
行如逆水行舟，不进则退
08-31 446
【代码】uniapp二维码生成。
uni-app 微信小程序开发安装配置 HbuilderX 微信小程序开发工具
最新发布
生产队的驴
08-31 950
官网下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html。微信公众平台：https://mp.weixin.qq.com/开启后HbuilderX 就可以自动调用小程序开发工具完成预览。HbuilderX 选择微信开发者工具的安装路径。HbuilderX创建项目。编译器用来编写小程序代码。用于小程序的页面调试。
uniapp tabbar 图标
07-16
### 回答1： Uniapp是一种基于Vue.js的跨平台应用开发框架，提供了丰富的组件和API供开发者使用。其中，Tabbar（选项卡栏）是Uniapp中常用的导航组件之一，用于实现底部或顶部的导航栏。 在Uniapp中，我们可以使用Tabbar组件来创建一个具有多个选项卡的导航栏。而Tabbar图标指的是每个选项卡上显示的图标。 Uniapp提供了多种方式设置Tabbar图标，主要有以下几种： 1. 使用字体图标库：Uniapp内置了一些常见的字体图标库，如FontAwesome、Iconfont等。我们可以在项目中引入相应的字体图标库，然后在Tabbar组件中设置icon信息为图标的类名即可。 2. 使用本地图片：我们可以将图标图片放置在项目的某个目录下，然后在Tabbar组件中设置icon信息为图片的路径。 3. 使用网络图片：与使用本地图片类似，只是需要设置icon信息为网络图片的URL。 在设置Tabbar图标时，还可以通过Tabbar组件的其他属性，如selectedIconColor、iconSize、textColor等，来进一步设置图标的样式、大小、颜色等。 总之，Uniapp提供了多种方式来设置Tabbar图标，开发者可以根据项目需求和个人喜好选择合适的方式来设置。同时，在设置Tabbar图标时，也可以考虑与整体UI风格、页面内容等的协调性，以提高用户体验。 ### 回答2： uniapp 是一款跨平台的前端开发框架，可以通过编写一套代码同时在多个平台上运行。在 uniapp 中，可以通过使用 TabBar 组件来创建底部导航栏。 TabBar 组件可以用于展示多个页面，并为每个页面提供一个对应的图标。使用 TabBar 组件可以方便用户在不同页面之间进行切换。在 uniapp 中，可以通过设置 TabBar 的图标属性来指定每个页面对应的图标。 uniapp 提供了一个图标库，内置了一些常用的图标，可以直接在 TabBar 组件的图标属性中使用。例如，可以使用 "home" 表示首页图标，"search" 表示搜索图标等。 如果内置的图标库不能满足我们的需求，也可以通过引入第三方图标库来使用自定义图标。例如，可以使用 FontAwesome 作为第三方图标库，在 TabBar 组件的图标属性中引用对应的图标名称。 除了使用内置或第三方图标库的图标，还可以使用自定义的图标。在 uniapp 中，可以将自定义图标放置在项目的某个目录下，并在 TabBar 组件的图标属性中使用相对路径来引用自定义图标。例如，可以在项目中的 "icons" 目录下放置图标文件，然后使用 "/icons/my-icon.png" 来引用自定义图标。 通过以上的方式，我们可以在 uniapp 中灵活地设置 TabBar 的图标，以实现更好的用户体验。 ### 回答3： uniapp是一款跨平台的开发框架，可以使用Vue.js进行开发，允许开发者一次编写代码，同时在多个平台上进行部署。其中，uniapp具有自定义tabbar的功能，可以轻松实现自定义的图标样式。 在uniapp中，tabbar是一种常见的导航组件，通常由多个tab（选项卡）组成，每个tab对应一个页面。在tabbar中，可以通过设置不同的图标来表示不同的页面，使用户可以在不同的页面之间进行切换。 uniapp提供了丰富的图标库供开发者选择，开发者可以根据自己的需要，选择合适的图标样式作为tab图标。同时，uniapp也支持自定义图标，开发者可以使用自己设计的图标作为tab图标。 为了实现自定义tabbar的图标样式，开发者可以按照以下步骤进行操作： 1. 在uniapp项目中，找到对应的tabbar文件，通常为`tabbar.vue`或者`tabbar.json`。 2. 在tabbar中定义每个tab的图标样式，可以使用uniapp提供的图标库或者自定义的图标。例如： ``` { "text": "首页", "iconPath": "/static/tabbar/home.png", "selectedIconPath": "/static/tabbar/home-active.png" } ``` 在上述代码中，`iconPath`表示tab未选中时的图标路径，`selectedIconPath`表示tab选中时的图标路径。 3. 根据需要，可以设置不同的图标样式，如文字颜色、大小等。 4. 在各个页面中，按照tab的顺序进行布局，并在对应的页面中添加内容。 通过以上步骤，就可以实现自定义tabbar图标样式。开发者可以根据自己的需要，设计和调整tab图标的样式，以及实现相应的交互效果，提升应用的用户体验。同时，在uniapp中，可以通过配置来定义更多的tabbar属性，满足不同项目的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值