微信小程序-TabBar用法

主页：小王叔叔的博客

支持:点赞关注️收藏​

---

​​​​​​​如何搭建多选面板（HH自己理解）：tabBar的用法？？？

tabBar用法：

1，打开微信小程序的开发工具：微信web开发者工具，创建自己的小程序的项目

2，目录结构中，找到app.json文件，在page中输入tabBar的相关代码，及在整体文件夹下，按照MVC分层模式，创建微信小程序的代码结构文件夹，并存放

tabBar中所需要的图片（.png/.jpg/...）

我的分层如下：..\pages\images\tabbars -->存放tabBar的图片

3，在app.json中写入tabBar的代码，我的代码如下：

"tabBar": {"index":"-1","color": "#ccc","selectedColor": "#35495e","borderStyle": "white","backgroundColor": "#f9f9f9","list": [{"text": "首页","pagePath": "pages/work/workindex","iconPath": "pages/images/tabbars/home.png","selectedIconPath": "pages/images/tabbars/home_active.png"},{"text": "通讯录","pagePath": "pages/logs/logs","iconPath": "pages/images/tabbars/telbill.png","selectedIconPath": "pages/images/tabbars/telbill_active.png"},{"text": "我的","pagePath": "pages/logs/logs","iconPath": "pages/images/tabbars/mine.png","selectedIconPath": "pages/images/tabbars/mine_active.png"}]}

以上为tabBar的代码

4，在tabBar中涉及的图片在网上就可以找到，我是在：【http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3】

里面找到的，一起分享下。

5，这就是tabBar的代码，然后在工具中“预览”下，看看效果。

---

转载声明：本文为博主原创文章，未经博主允许不得转载

️注意 ~

本期内容就结束了，如果内容有误，麻烦大家评论区指出！

如有疑问可以在评论区或私信，尽我最大能力‍*️帮大家解决！

如果我的文章有帮助到您，欢迎点赞+关注️鼓励博主，您的鼓励是我分享的动力~

​