小程序的标签栏要在小程序的主配置文件 app.json 里面配置一下 .. 添加一个 tabBar ... 给它一个对象 .. 里面可以使用一些配置选项 .. 具体的选项可以参数小程序的开发文档 ..

标签栏上的项目可以放在一个 list 里面 .. 它是一个数组 ... 每个项目又是一个对象 .. 先用 text 这个属性，可以设置一下标签项目上显示的文字 ..

先给首页添加一个标签项目 ... 标签上的文字是 首页 .. 点一下标签打开的页面可以使用 pagePath 这个属性配置一下 .. 首页的路径是 pages/index/index ..

复制一份，再添加一个标签项目 .. 这个项目是 活动 ... 页面的路径是 pages/event/event

演示

你会发现，在小程序的底部现在会显示一个标签栏 .. 上面有两个项目 .. 首页，还有 活动 .. 点一下活动 .. 打开的就是用 pagePath 指定的页面 ..

不过这里在控制台上提示一个错误 .. 说 event 页面在 app.json 里面没找到 .. 回到 app.json .. 打开 pages ... 这里我们再添加一个页面 .. 路径是 pages/event/event ..

然后再回到模拟器上试一下 ... 打开 活动 ... 页面上会显示一个 events ! 这个页面上显示的内容就是 event 页面提供的 ..

图标

标签项目上除了文字还可以添加一个小图标 .. 可以使用 jpg 或者 png 格式的图像文件 .. 在一个项目里用一下 iconPath .. 这个属性的值就是标签项目上用的小图标的位置 ..

之前我们已经下载了一些小图标，把它们放在了 assets .. icons 这个目录里了 .. 这里有个 home.png ，可以让它作为首页标签项目上显示的小图标 ..

另外我们还可以单独设置一下当前激活状态下的小图标 .. 添加一个 selectedIconPath .. 对应的值也是一个图标的位置 .. 这里我们用一下 home-active.png ..

同样的方法再处理一下活动这个标签项目 .. 图标是 event.png ... 激活状态的图标是 event-active.png ..

演示

再到模拟器上看一下 .. 现在标签栏上的项目会显示一个小图标 .. 切换一下标签 .. 正常状态还有激活状态，标签项目会使用我们指定的不同的小图标 ..

样式

现在我们再去配置一下这个标签栏的样式 .. 先用一个 color .. 它设置的是标签栏上的文字的颜色 .. 可以用一下 rgba 来表示的颜色 .. 颜色是黑色 .. 不透明度是 0.6 ..

再添加一个 selectedColor .. 它可以设置激活状态下的标签项目上的文字的颜色 .. 可以使用纯黑色 ..

borderStyle 可以设置标签栏上的边框的样式 .. 只能是 black 或者 white .. 这里我们把它设置成 white

然后用一个 backgroundColor ... 设置一下标签栏的背景颜色 .. #ededed ...

再到模拟器上预览一下我们配置好的这个标签栏 ...