本文例項為大家分享了微信小程式底部導航欄元件的具體實現程式碼，供大家參考，具體內容如下

1、在自己專案的公共元件的檔案價www.cppcns.com下新建tabbar.（定義的自定義導航欄元件）

<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-DkYXceeJ
 
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",]http://www.cppcns.com,}
    },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="s" 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.on檔案中新增程式碼，保證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();
},

5、展示效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。