uniapp底部导航栏,uniapp固定顶部导航栏

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

　　UNI-APP开发(仿饿)开发课程：进入学习

　　本教程运行环境：windows7系统，Uni-App版本2.5.1，Dell G3电脑。

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

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

　　TabBar参数描述

　　颜色：导航栏字体颜色

　　SelectedColor:所选字体的颜色。

　　BackgroundColor:底部背景色

　　BorderStyle:底部的边框颜色，只能是“黑”或“白”

　　列表：包含以下选项的对象

　　{

　　页面路径：页面路径

　　文本：底部导航文本

　　IconPath:被选中前的图标路径。

　　SelectedIconPath:选定的图标路径。

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

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

　　第二步：制作导航图标

　　(1)打开阿里巴巴矢量图标库(Iconfont)

　　(2)找到合适的图标加入购物车

　　(3)选择合适的颜色和格式下载。

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

　　{

　　pages:[

　　.

　　],

　　tabBar: {

　　颜色: #8a8a8a ，

　　selectedColor:#00aa00 ，

　　边框样式:黑色，

　　backgroundColor:#ffffff ，

　　列表:[

　　{

　　页面路径:页面/索引/索引，

　　Text :主页，

　　iconPath : static/home _ normal . png ，

　　selectedIconPath : static/home . png

　　},

　　{

　　页面路径:页面/搜索/搜索，

　　文本:找到，

　　iconPath : static/search _ normal . png ，

　　selectedIconPath : static/search . png

　　},

　　{

　　页面路径:页面/我/我，

　　文本:我的，

　　iconPath : static/me _ normal . png ，

　　selectedIconPath : static/me . png

　　}

　　]

　　},

　　globalStyle: {

　　.

　　}

　　}效果显示

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

　　这就是uniapp如何组件化底部导航的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。