原生小程序用vant组件自定义底部导航

在根目录中创建custom-tab-bar，新建page index

在app.json或index.json中引入vant组件

"usingComponents": {
   
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

index.wxss

/* custom-tab-bar/index.wxss */
.custom-tab-bar-wrapper {
   
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-tab-bar-wrapper .text {
   
  font-size: 24rpx;
}

.custom-tab-bar-wrapper .tab-icon {
   
  width: 40rpx;
  height: 40rpx;
}

.custom-tabbar-item {
   
  width: 100% !important;
}
.imageIcon{
   
  width: 50rpx; height: 50rpx;
}

index.wxml

<van-tabbar 
  active="{
    { active }}" 
  bind:change="onChange"
  inactive-color="