uni-app自定义底部tabBar导航适配机型

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

"tabBar": {

        "custom": true

}

在app.vue中读取机型的屏幕高度 设置一个全局变量 tbBottom

 globalData: {

    //全局变量 

    tbBottom:0,

  },

 onLaunch: function () {

    let wxSync=wx.getSystemInfoSync();

this.globalData.tbBottom=wxSync.screenHeight-wxSync.safeArea.bottom

  },

然后就是组件封装 props的selectIndex用来确定哪一个按钮是选中的状态

<template>
  <div class="tabbar" :style="{'bottom':tbBottom+'px'}">

    <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 {

      tbBottom: getApp().globalData.tbBottom,

      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'
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    goPage(pagePath){

     wx.switchTab({
                        url:pagePath,
                      });
    }
  },
};
</script>
<style lang="scss" scoped>
.tabbar{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
     750rpx;
    height: auto;
    ul{
       height: auto;
       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;
           80rpx;
  
        }
      }
    }

    
}
</style>

如：在index.vue页面中

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