微信小程序自定义底部导航栏组件

本文实例为大家分享了微信小程序底部导航栏组件的具体实现代码，供大家参考，具体内容如下

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();
},

5、展示效果

来源：https://blog.csdn.net/weixin_43865030/article/details/120852452