小程序 自定义 tabBar_tabbar自定义

tabBar

自定义 tabBar

1、自定义tabBar 的一般实现步骤

自定义 tabBar 分为 3 大步骤，分别是：

① 配置信息

在 app.json 中的 tabBar 项指定 custom 字段，“custom”:ture
在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

{
    
"tabBar"：{
   
	"custom":true   // 必填
	"color": "#000000", 
	"selectedColor": "#000000",
	 "backgroundColor": "#000000", 
	 "list": [{
    
	     "pagePath": "page/component/index", 
	     "text": "组件" 
	 },
	  {
   
	    "pagePath": "page/API/index", 
	    "text": "接口" 
	   }] 
	  },
	  "usingComponents": {
   } }
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

② 添加 tabBar 代码文件

在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

custom-tab-bar/index.js 
custom-tab-bar/index.json 
custom-tab-bar/index.wxml 
custom-tab-bar/index.wxss
1
2
3
4

③ 编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar
接口，可获取当前页面下的自定义 tabBar 组件实例。

2、基于vant-weapp 组件库来渲染底部tabbar

• 在 app.json/index.json 文件中，注册组件

   "usingComponents"</