菜鸟读文档-Vant Weapp-2(引入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[代码]标签栏了 [图片] 预告 实现[代码]Tabbar[代码]标签栏页面跳转 但仅仅是成功出现[代码]Tabbar[代码]标签栏还不够, 我们还希望能够实现点击[代码]Tabbar[代码]标签栏实现页面跳转, 但在实现这一功能的过程中又是有一连串的"坑"… 菜鸟读文档-Vant Weapp-3(用自己摸索的方法实现Tabbar标签栏点击跳转)