效果圖

在?pages.json 中設置隱藏自帶的 tabbar 導航欄

"custom": true, // 開啟自定義tabBar(不填每次原來的tabbar在重新加載時都回閃現(xiàn))

新建一個 custom-tabbar.vue 自定義組件頁面

custom-tabbar.vue

<!-- 自定義底部導航欄 -->
<template>
  <view class="container">
    <view
      class="tabbar-item"
      :class="[item.centerItem ? ' center-item' : '']"
      :style="'width: calc(100% /' + tabbarList.length + ')'"
      @click="changeItem(item)"
      v-for="(item, i) in tabbarList"
      :key="i"
    >
      <view class="item-top"><image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" /></view>
      <view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /* 當前導航欄 */
    currPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      curItem: 0, // 當前所選導航欄
      tabbarList: [
        {
          id: 0,
          pagePath: "/pages/public/index",
          iconPath: "/static/tab-bar/home.png",
          selectedIconPath: "/static/tab-bar/home-active.png",
          text: "首頁",
          centerItem: false
        },
        {
          id: 1,
          pagePath: "",
          iconPath: "/static/tab-bar/bulge-active.png",
          selectedIconPath: "/static/tab-bar/bulge-active.png",
          text: "稱重",
          centerItem: true
        },
        {
          id: 2,
          pagePath: "/pages/weight/my",
          iconPath: "/static/tab-bar/my.png",
          selectedIconPath: "/static/tab-bar/my-active.png",
          text: "我的",
          centerItem: false
        }
      ] // 導航欄列表
    };
  },
  mounted() {
    this.curItem = this.currPage; // 當前所選導航欄
    // #ifdef H5
    uni.hideTabBar(); // 隱藏 tabBar 導航欄
    // #endif
  },
  methods: {
    /* 導航欄切換 */
    changeItem(e) {
      // 中間凸起按鈕
      if (e.id === 1) {
        // todo
        return;
      }
      uni.switchTab({ url: e.pagePath }); // 跳轉(zhuǎn)到其他 tab 頁面
    }
  }
};
</script>

<style lang="scss" scoped>
$textDefaultColor: #999; // 文字默認顏色
$bottomBg: #fff; // 底部背景
$textSelectedColor: #67c23a; // 文字選中顏色
$centerItemBg: #fff; // 中間凸起按鈕背景
.container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 110rpx;
  color: $textDefaultColor;
  padding: 5rpx 0;
  background-color: $bottomBg;
  box-shadow: 0 0 10rpx #999;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100rpx;
  .item-top {
    flex-shrink: 0;
    width: 65rpx;
    height: 65rpx;
    padding: 4rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .item-bottom {
    width: 100%;
    font-size: 28rpx;
  }
  .item-active {
    color: $textSelectedColor;
  }
}
.center-item {
  position: relative;
  .item-top {
    position: absolute;
    top: -55rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 105rpx;
    height: 105rpx;
    background-color: $centerItemBg;
    border-radius: 50%;
  }
  .item-bottom {
    position: absolute;
    bottom: 5rpx;
  }
}
</style>

底部安全區(qū)域的適配問題可查看：uni-app 蘋果手機底部安全區(qū)域的適配問題文章來源地址http://www.zghlxwxcb.cn/news/detail-727043.html

在 main.js 中引用組件

// 注冊全局組件
import customTabbar from "components/custom-tabbar.vue"
Vue.component('custom-tabbar', customTabbar)

在要用到的頁面中直接調(diào)用

<!-- 自定義 tabbar 底部導航欄 -->
<custom-tabbar :curr-page="0" />

到了這里，關于uni-app 實現(xiàn)凸起的 tabbar 底部導航欄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！