HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)

HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)

作者：班尼科

本博文是本人原创，喜欢请给我点赞，转载请注明出处哦.

标签： 旅游 HBuilder H5+ MUI 底部选项卡
目的：在H5+移动APP中使用mui添加底部选项卡/底部导航栏

【前言】 在上文中，我们为地图项目添加了标题栏中实现注册、登录、设置等，但页面底端没有常见的底部导航栏（在mui中成为底部选项卡)，阅读本文，让你不懂编程也能开发APP (吹牛了哈:)

Step 1. 老规矩，学习模板工程

选择“Hello mui”新建移动APP，在“项目管理器”下找到examples下的tabbar.html文件，学习其有关底部选项卡的代码.

Step2. 复制并修改有关代码粘贴到我们上文temp1项目的main.html文件的对应位置，见下图：

真机运行如下：

两点说明：

(1) 底部选项卡mui-bar-tab, 其中的icon可以参考模板生成的icon.html文件；
(2) 底部选项卡选项的跳转实现，学习模板文件可以知道它是就放在当前页面中的. 我们可以根据需要改写跳转页面.