评论

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

记录一个菜鸟在阅读Vant Weapp文档过程中的"踩坑"历程. 本篇的主要内容是: Tabbar组件的引入

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

正文

独特的引入

Vant WeappTabbar标签栏的引入实际上不是从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标签栏点击跳转)

最后一次编辑于  10-04  
点赞 1
收藏
评论
登录 后发表内容