Vant Weapp Tabbar标签栏配置 小程序

Vant Weapp Tabbar标签栏配置

正文

独特的引入

Vant Weapp的Tabbar标签栏的引入实际上不是从Vant Weapp文档开始, 而是从微信小程序文档中, 自定义tabBar页面开始.

微信小程序文档部分

我们首先按照微信小程序文档中自定义tabBar页面中的使用流程进行操作:

配置信息

我们可以将小程序文档中给的实例直接复制到自己项目中的app.json文件中, 然后将页面路径改成自己项目对应的页面路径即可

{
  "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.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
实际上这段话对应的操作是:
在miniprogram路径下创建一个名为custom-tab-bar的文件夹
在该文件夹下添加上述提到的文件

编写tabBar代码(直到这一步我们才返回到Vant Weapp文档)

Vant Weapp文档部分

接下来的操作都是在custom-tab-bar文件夹下的文件中进行

首先我们在index.json中引入Tabbar标签栏组件

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

然后在index.wxml中使用该组件

<van-tabbar>
  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
  <van-tabbar-item icon="search">标签2</van-tabbar-item>
</van-tabbar>

自此, 页面中应该已经出现Tabbar标签栏了