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; 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进去 就显示选中第一个