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": {
} }
}
}
② 添加 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
③ 编写 tabBar 代码
用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar
接口,可获取当前页面下的自定义 tabBar 组件实例。
2、基于vant-weapp 组件库来渲染底部tabbar
- 在 app.json/index.json 文件中,注册组件
"usingComponents"</