小程序整合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" >
<image
slot="icon"
src="{{ item.normal }}"
mode="aspectFit"
style="width: 30px; height: 18px;"
/>
<image
slot="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