菜鸟读文档-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 标签栏进行页面跳转, 但在实现这一功能的过程中又是有一连串的"坑"...

菜鸟读文档-Vant Weapp-3(用自己摸索的方法实现Tabbar标签栏点击跳转)