【uni-app】tabbar自定义

需求

自带的tabbar是无法做成圆角加阴影的，最后的解决方法只能是自定义tabbar。

实现

第一步：在page.json中定义两个tab的路径。

"tabBar": {
  "blurEffect":"extralight",
  "color": "#909399",
  "selectedColor": "#18b566",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "pages/list/list"
    },
    {
      "pagePath": "pages/my/my"
    }
  ]
},

第二步：在components中自定义一个tabbar的组件

<template>
  <view class="tabbar" >
    <view class="tabbar-item" v-for="(item,index) in list" :key="index" @click="changeTab(index)">
      <image class="img" :src="item.selectedIconPath" v-if="current == index"></image>
      <image class="img" :src="item.iconPath" v-else></image>
      <view class="text active" v-if="current == index">{
   
   {item.text}}</view>
      <view class="text" v-else>{
   
   {item.text}}</view>
    </view>
  </view>
</template>
 
<script>
export default {
    name: "tabbar",
    props: {
      current: Number
    },
    created() {
      uni.hideTabBar() 
    },
    data() {
      return {
        list: [
          {
            selectedIconPath: "../../static/tabbar/list-active.png",
            iconPath: "../../static/tabbar/list.png",
            text: '列表',
            pagePath: "pages/list/list"
          },
          {
            selectedIconPath: "../../static/tabbar/my-active.png",
            iconPath: "../../static/tabbar/my.png",
            text: '我的',
            pagePath: "pages/my/my"
          }
        ],
      }
    },
    methods: {
      changeTab(e) {
        uni.switchTab({
          url: '/' + this.list[e].pagePath,
        })
      }
    }
}
</script>
 
<style scoped>
  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 150upx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image:url(../../static/tabbar/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 30rpx 0 0;
  },
  .tabbar-item {
    padding: 0 40rpx;
  }
  .img {
    height: 42upx;
    width: 42upx;
  }
  .text {
    font-size: 23upx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #CACACA;
    line-height: 27upx;
  }
  .text.active {
    color: #409EFE;
  }
</style>

第三步：使用tabbar。

<!-- list页面 -->
<tabbar current="0"></tabbar>
<!-- my页面 -->
<tabbar current="1"></tabbar>

<script>

import tabbar from '@/components/tabbar/index'
components:{
  tabbar
}

</script>

解析

进入页面就隐藏tabbar

created() {
  uni.hideTabBar() 
},

tabbar遮住正常页面，层级又不能高于遮罩层，设置层级99。

.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}