脚本宝典收集整理的这篇文章主要介绍了uniapp如何将底部导航组件化，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

uniapp将底部导航组件化的方法：首先在Pages目录下创建页面；然后制作导航图标；最后在【pages.json】文件下配置tabBar。

本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。

推荐（免费）：uni-app开发教程

uniapp将底部导航组件化的方法：

tabBar参数说明

• color：导航栏字体颜色

• selectedColor：选中后字体的颜色

• backgroundColor：底部背景颜色

• borderStyle：底部的border颜色，只能是“black”或者“whITe”

• list：对象，包含以下这些选项

{
pagePath：页面路径
text：底部导航文字
iconPath：没选中前的图标路径
selectedIconPath：选中后的图标路径
}

第一步：在pages目录下创建页面

这是创建的目录和页面名称（仅供参考）

第二步：制作导航图标

（1）打开阿里巴巴矢量图标库（Iconfont）

（2）找到合适的图标加入购物车

（3）选择合适的颜色和格式下载即可

第三步：在pages.json文件下配置tabBar

{
      "pages":[
            ...
      ],
      "tabBar": {
"color":"#8a8a8a",
"selectedColor":"#00aa00",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list": [
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/home_normal.png",
"selectedIconPath":"static/home.png"
},
{
"pagePath":"pages/seArch/search",
"text":"发现",
"iconPath":"static/search_normal.png",
"selectedIconPath":"static/search.png"
},
{
"pagePath":"pages/me/me",
"text":"我的",
"iconPath":"static/me_normal.png",
"selectedIconPath":"static/me.png"
}
]
},
      "globalStyle": {
...
}
}

效果展示

相关免费学习推荐：编程视频

以上就是uniapp如何将底部导航组件化的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的uniapp如何将底部导航组件化全部内容，希望文章能够帮你解决uniapp如何将底部导航组件化所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。