uni |
您所在的位置：网站首页 › 如何设置360导航主页图标位置 › uni |
uni
|
uni-app 如何设置底部导航栏的图标
2023年10月30日 ios, 功能实现, 安卓, 组件 1,335
很多开发者在刚接触 uni-app 开发时，对导航栏的实现比较懵，也不知道在哪里修改图标。这篇文章给大家讲清楚。 我们在使用 uni-app 开发安卓或者 iOS APP 时，底部导航栏的图标应该怎么设置？本文说明 APP 端的导航组件的原理以及图标设置方法。  app tab bar
系统默认 tabbar
很多 APP 都会有底部菜单，uni-app 也帮我们内置了底部导航菜单，不需要自己去写代码，只需要简单配置参数就可以实现。这种方式只适合使用系统默认 tabbar 的项目。 图标配置方法我们找到 uni-app 项目的 pages.json 文件，一般我们创建了新的 uni-app 项目，这个文件也会自动生成，在这个文件里有个节点 “tabbar”，按照下面的配置方式来设置导航菜单： "tabBar": { "color": "#000000", "selectedColor": "#FF0000", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/image/icon_home.png", "selectedIconPath": "static/image/icon_home_selected.png", "text": "首页" }, { "pagePath": "pages/store/index", "iconPath": "static/image/icon_store.png", "selectedIconPath": "static/image/icon_store_selected.png", "text": "商城" }, { "pagePath": "pages/account/index", "iconPath": "static/image/icon_account.png", "selectedIconPath": "static/image/icon_account_selected.png", "text": "我的" }] }这样就简单配置好了一个白色背景、黑色文字，并且选中时红色的导航菜单。从代码中可以看到，"iconPath" 就是图标图片文件的路径，"selectedIconPath" 就是菜单选中状态的图片路径，只要我们准备好菜单的图标图片文件，替换路径就可以设置菜单的图标了。如果没有 UI 设计基础，最好还是让设计师来提供一个正方形的透明 PNG 图片。 注意事项 图标图片要用背景透明的 PNG 文件，否则导航栏会很难看； 图标的尺寸大小要适中，否则小了会模糊，太大又浪费空间。根据我的经验，一般使用 96x96px，你也可以直接用这个尺寸； 除了默认图标，还应该准备一个选中状态，主要注意的是，选中状态和默认状态一般只是改变了颜色，位置要一致，否则选中时会很突兀，影响效果。uni-app 系统导航栏的图标设置方法就是这样了，这种方式配置简单，不需要自己实现导航的功能，但能改的地方也很少，如果要实现个性化的导航栏，比如中间菜单是凸起式的大图标，就需要自定义导航栏了。 ios功能实现安卓组件 |
【本文地址】
今日新闻 |
推荐新闻 |