首页 > web前端 > uni-app > 正文

uniapp如何将底部导航组件化

coldplay.xixi
发布: 2023-01-13 00:44:15
原创
3625 人浏览过

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

uniapp如何将底部导航组件化

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

推荐(免费):uni-app开发教程

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

tabBar参数说明

  • color:导航栏字体颜色

  • selectedColor:选中后字体的颜色

  • backgroundColor:底部背景颜色

  • borderStyle:底部的border颜色,只能是“black”或者“white”

  • list:对象,包含以下这些选项

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

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

10df3bac17ecec513d41263922337f1.png

23e9590943b5dffa7a9c3f703f5affc.png

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

ab591d9efa1b22f2723daaf45f2c937.png

第二步:制作导航图标

(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": {
...
}
}
登录后复制

效果展示

2f32f918dc314bb75540512c2949dd8.png

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

以上是uniapp如何将底部导航组件化的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!