概述
和微信官方的tabBar标签栏相比,Vant Weapp的tabBar标签栏更加美观,还有徽标提示
实现过程
引入tarBar组件
引入步骤查看:微信小程序引入 Vant Weapp 组件库 | LeDao’s Blog (zoutl.cn)
1 2 3 4
| "usingComponents": { "van-tabbar": "/dist/tabbar/index", "van-tabbar-item": "/dist/tabbar-item/index" }
|
新建页面
要新建的页面和上一篇博客一样,博客链接为:微信小程序实现 tabBar 标签栏 | LeDao’s Blog (zoutl.cn)
添加tarBar配置
在app.json
中添加tarBar配置,"custom": true
用来声明这个tarBar是定制的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| "tabBar": { "custom": true, "list": [ { "pagePath": "pages/shouye/shouye", "text": "首页" }, { "pagePath": "pages/type/type", "text": "分类" }, { "pagePath": "pages/cart/cart", "text": "购物车" }, { "pagePath": "pages/my/my", "text": "我的" } ] }
|
新建Component
首先在根目录下添加一个文件夹,该文件夹要命名为custom-tab-bar
,然后右键点击这个文件夹,选择新建Component
并输入index
在custom-tab-bar/index.wxml
中编写Vant Weapp的tarBar代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <view> <van-tabbar active="{{ active }}" active-color="#e35d55" bind:change="onChange" placeholder="true"> <van-tabbar-item icon="wap-home-o" data-page="shouye" data-target="/pages/shouye/shouye"> 首页 </van-tabbar-item> <van-tabbar-item icon="apps-o" data-page="type" data-target="/pages/type/type"> 分类 </van-tabbar-item> <van-tabbar-item icon="shopping-cart-o" data-page="cart" data-target="/pages/cart/cart" dot="true"> 购物车 </van-tabbar-item> <van-tabbar-item icon="manager-o" data-page="my" data-target="/pages/my/my"> 我的 </van-tabbar-item> </van-tabbar> </view>
|
在custom-tab-bar/index.js
的methods
函数里面添加以下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| onChange(event) { var that = this switch (event.detail) { case 0: wx.switchTab({ url: '/pages/shouye/shouye' }) break case 1: wx.switchTab({ url: '/pages/type/type' }) break; case 2: wx.switchTab({ url: '/pages/cart/cart' }) break; case 3: wx.switchTab({ url: '/pages/my/my' }) break; default: break; } },
init(active) { this.setData({ active: active }) }
|
修改标签页的js文件
首先说明一下,标签页的索引从0开始
在首页的js文件的onShow()
函数加入以下代码(分类、购物车、我的
3个页面也要加),对应的索引看上图
1 2 3
| onShow() { this.getTabBar().init(0); }
|
效果
PS.
如果页面的内容过多需要下拉时,会有部分内容被Vant Weapp的tabBar标签栏遮住,即使使用placeholder
属性也没有用,我们可以在该页面的最后加入下面代码解决这个问题
1
| <view style="padding-bottom: 20%;"></view>
|
如果要使用微信官方的tarBar标签栏查看博客:微信小程序实现 tabBar 标签栏 | LeDao’s Blog (zoutl.cn)