菜鸟读文档-Vant Weapp-2(引入Tabbar标签栏)

正文

独特的引入

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

微信小程序文档部分

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

1. 配置信息

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

   {
     "tabBar": {
       "custom": true,
       "color": "#000000",
       "selectedColor": "#000000",
       "backgroundColor": "#000000",
       "list": [{
         "pagePath": "page/component/index",
         "text": "组件"
       }, {
         "pagePath": "page/API/index",
         "text": "接口"
       }]
     },
     "usingComponents": {}
   }
   

2. 添加tabBar代码文件

   在代码根目录下添加入口文件:

   custom-tab-bar/index.js
   custom-tab-bar/index.json
   custom-tab-bar/index.wxml
   custom-tab-bar/index.wxss
   

   实际上这段话对应的操作是:

   1. 在miniprogram路径下创建一个名为custom-tab-bar的文件夹

   2. 在该文件夹下添加上述提到的文件

      

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

Vant Weapp文档部分

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

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

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

2. 然后在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标签栏了

预告

实现Tabbar标签栏页面跳转

但仅仅是成功出现Tabbar标签栏还不够, 我们还希望能够实现点击Tabbar标签栏实现页面跳转, 但在实现这一功能的过程中又是有一连串的"坑"…