1.首先需要在page.json里把

"tabBar": {         "custom": true } 然后就是组件封装 props的selectIndex用来确定哪一个按钮是选中的状态

<template>
  <div class="tabbar">
    <ul>
      <li v-for="(item, index) in pageData" :key="index" @click="goPage(item.pagePath)">
        <img :src="selectIndex==index?item.selectedIconPath:item.iconPath" alt="" />
        <p>{{ item.text }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['selectIndex'],
  data() {
    return {
      pageData: [
        {
          text: "首页",
          pagePath:'/pages/index/index',
          iconPath: "/static/home.png",
          selectedIconPath:'/static/home_se.png'
        },
        {
          text: "个人",
           pagePath:'/pages/service/index',
          iconPath: "/static/check.png",
          selectedIconPath:'/static/check_se.png'
        },
      ],
    };
  },
  onl oad() {},
  methods: {
    goPage(pagePath){

     wx.switchTab({
                        url:pagePath,
                      });
    }
  },
};
</script>
<style lang="scss" scoped>
.tabbar{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
    width: 750rpx;
    height: auto;
    ul{
       height: auto;
      width: 100%;
      display: flex;
      justify-content: space-between;
       align-items: center;
      li{
        flex: 1;
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img{
          height: 80rpx;
          width: 80rpx;
  
        }
      }
    }

    
}
</style>

如：在index.vue页面中

给selectIndex传0进去 就显示选中第一个