版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31653405/article/details/80013620

如何搭建多选面板（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的代码，然后在工具中“预览”下，看看效果。


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

文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！

----------------------------------------------------------------------------------------------------------------  来都来了，那就点个赞吧

阅读更多