小程序自定义底部tabbar，并且解决遮罩层无法遮挡住底部tabbar问题

一、根目录下新建文件夹

二、index.wxml

javascript 复制代码

<view>
  <van-tabbar active="{{ active }}" active-color="#f2be8f" bind:change="onChange">
    <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info? item.info:''}}">
      <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 50rpx;height: 50rpx;"/>
      <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 50rpx;height: 50rpx;"/>
      {{item.text}}
    </van-tabbar-item>
  </van-tabbar>
</view>

三、index.json

javascript 复制代码

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

四、index.js

javascript 复制代码

// custom-tab-bar/index.js
import {
  menuData
} from './data'
Component({
  /**
   * 组件的属性列表
   */
  options: {
    // 开启这个才可以修改vant组件里面的样式
    styleIsolation: 'shared'
  },
  properties: {

  },
  /**
   * 组件的初始数据
   */
  data: {
    active: null,
    list: menuData
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 切换tabbar页面
    onChange(event) {
      this.setData({
        active:event.detail
      })
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    }
  }
})

五、data.js

javascript 复制代码

export const menuData = [{
    "pagePath": "/pages/index/index",
    "text": "首页",
    "iconPath": "/assets/images/tabbar/index.png",
    "selectedIconPath": '/assets/images/tabbar/index-select.png'
  },
  {
    "pagePath": "/pages/order/order",
    "text": "点单",
    "iconPath": "/assets/images/tabbar/order.png",
    "selectedIconPath": '/assets/images/tabbar/order-select.png'
  },
  {
    "pagePath": "/pages/record/record",
    "text": "订单",
    "iconPath": "/assets/images/tabbar/record.png",
    "selectedIconPath": '/assets/images/tabbar/record-select.png'
  },
  {
    "pagePath": "/pages/my/my",
    "text": "我的",
    "iconPath": "/assets/images/tabbar/my.png",
    "selectedIconPath": '/assets/images/tabbar/my-select.png'
  }
]

六、app.json

javascript 复制代码

"tabBar": {
    "custom": true, // 重点，其他的该怎么写怎么写，表示开启自定义tabbar
    "color": "#666666",
    "selectedColor": "#FF5F15",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/images/tabbar/index.png",
        "selectedIconPath": "assets/images/tabbar/index-select.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "点单",
        "iconPath": "assets/images/tabbar/order.png",
        "selectedIconPath": "assets/images/tabbar/order-select.png"
      },
      {
        "pagePath": "pages/record/record",
        "text": "订单",
        "iconPath": "assets/images/tabbar/record.png",
        "selectedIconPath": "assets/images/tabbar/record-select.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "assets/images/tabbar/my.png",
        "selectedIconPath": "assets/images/tabbar/my-select.png"
      }
    ]
  },

为什么遮挡不住底部tabbar!!!

给弹出层设置z-index大于99999就可以了。