小程序整合vant weapp可以看《微信小程序vant weapp安装与使用》
微信官方文档有介绍自定义tabBar
1、在小程序根目录下创建custom-tab-bar文件夹，并创建以下文件。（这个是作为入口文件的）
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
2、修改custom-tab-bar/index.js （清除初始化的内容）
Component({data: { selected: 0,list: [{pagePath: "/pages/checkin/checkin",text: "打卡",normal: '/images/tabbar/position.png',active: '/images/tabbar/position-green.png'},{pagePath: "/pages/idcard/idcard",text: "上传",normal: '/images/tabbar/idcard.png',active: '/images/tabbar/idcard-green.png'}]},methods: {onChange(e) {console.log(e,'e')this.setData({ active: e.detail });wx.switchTab({url: this.data.list[e.detail].pagePath});},init() {const page = getCurrentPages().pop();this.setData({active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)});}}
})3、修改custom-tab-bar/index.json
{"component": true,"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index","van-icon": "@vant/weapp/icon/index"}
}4、 修改custom-tab-bar/index.wxml
代码中两个imgage是自定义图标的，未选中是item.normal图片，选中了是item.active
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#07c160" inactive-color="gainsboro"><van-tabbar-item wx:for="{{ list }}" wx:key="index" ><imageslot="icon"src="{{ item.normal }}"mode="aspectFit"style="width: 30px; height: 18px;"/><imageslot="icon-active"src="{{ item.active }}"mode="aspectFit"style="width: 30px; height: 18px;"/> {{item.text}}</van-tabbar-item>
</van-tabbar>5、在app.json添加tabBar
"tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "pages/checkin/checkin","text": "打卡"},{"pagePath": "pages/idcard/idcard","text": "上传"}]}6、每个tabBar页面的onShow()方法添加
/*** 生命周期函数--监听页面显示*/onShow: function () {this.getTabBar().init();},
效果图如下
源码下载：自定义tabBar
