如何实现微信小程序自定义底部导航栏组件

具体内容如下

1、在自己项目的公共组件的文件价下新建tabbar.vue（定义的自定义导航栏组件）

<template> 
  <view v-if="showTabbar" class="tabbar"> 
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="icon" 
      @click="switchTabBar(item.path, index)" 
    > 
      <image :src="index == current ? item.iconActivePath : item.iconPath"></image> 
      <text :class="index == current ? 'active_text' : 'text'" bindtap = 'go'>{{ item.name }}</text> 
    </view> 
  </view> 
</template> 
  
<script> 
  // import container from '@/channelMessage/get-container' 
  
  export default { 
    props: { 
      showTabbar: { 
        type: Boolean, 
        default: true, 
      }, 
      current:{ // 当前页面index 
    type:Number, 
    default:0 
   }, 
    }, 
    data() { 
      return { 
        selectedIndex: 0, 
        tabList: [ 
          { 
            name: "首页", 
            iconPath: require("../../../static/image/img/tab-home-nor.png"), 
            iconActivePath: require("../../../static/image/img/tab-home-sel.png"), 
          path: "/pages/index/index", 
          }, 
          { 
            name: "购物车", 
            iconPath: require("../../../static/image/img/tab-cart-nor.png"), 
            iconActivePath: require("../../../static/image/img/tab-cart-sel.png"), 
            path: "/pages/cart/cartEdit", 
          }, 
          { 
            name: "我的", 
            iconPath: require("../../../static/image/img/tab-my-nor.png"), 
            iconActivePath: require("../../../static/image/img/tab-my-sel.png"), 
            path: "/pages/mine/mine", 
          }, 
        ], 
    } 
    }, 
  
    onShow() { 
      // const containerId = container.getContainerId() 
      // if (containerId == '1000') { 
      //   this.showTabbar = false 
      // } 
    }, 
    methods: { 
    switchTabBar(path, index) { 
      this.item_index = index 
      wx.switchTab({ 
          url: path, 
      }) 
        // this.$router.replace(path) 
      }, 
     
    }, 
} 
</script> 
  
<style lang="scss" scoped> 
  .tabbar { 
    position: fixed; 
    bottom: 0; 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: space-around; 
    width: 100%; 
    height: 100rpx; 
    background-color: #ffffff; 
    padding-bottom: constant(safe-area-inset-bottom); 
    padding-bottom: env(safe-area-inset-bottom); 
  
    .icon { 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
  
      image { 
        width: 50rpx; 
        height: 50rpx; 
      } 
  } 
  .active_text{ 
        font-size: 20rpx; 
        margin-top: 5rpx; 
    color: #d81e06; 
      } 
  .text{ 
    font-size: 20rpx; 
    margin-top: 5rpx; 
    } 
  } 
</style>

2、在项目中的pages.json文件中新增代码，保证tabbar.vue中的wx.switchTab可以正常使用，代码如下：

"tabBar": { 
    "selectedColor": "#EE2F51", 
    "list": [{ 
      "pagePath": "pages/index/index", 
      "text": "首页", 
      "iconPath": "static/image/img/tab-home-nor.png", 
      "selectedIconPath": "static/image/img/tab-home-sel.png" 
    },{ 
      "pagePath": "pages/cart/cartEdit", 
      "text": "购物车", 
      "iconPath": "static/image/img/tab-cart-nor.png", 
      "selectedIconPath": "static/image/img/tab-cart-sel.png" 
    },{ 
      "pagePath": "pages/mine/mine", 
      "text": "我的", 
      "iconPath": "static/image/img/tab-my-nor.png", 
      "selectedIconPath": "static/image/img/tab-my-sel.png" 
    }] 
  },

3、在main.js中全局注册自定义组件

import tabBar from "./customComponents/commonComponents/tabBar/index.vue"; 
 
//换自己的组件位置，这里的index.vue就是前面所说的tabbar.vue 
Vue.component("tabBar", tabBar);

4、在需要使用导航栏的页面引入注册的组件

//为页面引入导航栏组件 
<tabBar :current=item_index></tabBar> 
  
//标记状态，是的导航栏可以根据页面显示不同的激活状态 
data() { 
      return { 
        item_index: 0, 
      } 
} 
  
//隐藏微信自带的导航栏 
onLoad() { 
      wx.hideTabBar(); 
},