yunshengtai-uniapp/tabbarComponent/tabbar.vue

<template>
<view :class="'tabbar_box ' + (isIphoneX?'iphoneX-height':'')" :style="'background-color:' + tabbar.backgroundColor">
  <block v-for="(item, index) in tabbar.list" :key="index">
    <navigator v-if="item.isSpecial == true" class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + tabbar.selectedColor" open-type="navigate">
      <view class="special-wrapper"><image class="tabbar_icon" :src="item.iconPath"></image></view>
      <image class="special-text-wrapper"></image>
      <text>{{item.text}}</text>
    </navigator>
    
    <navigator v-else class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + (index == currentTabIndex ? tabbar.selectedColor : tabbar.color)" open-type="switchTab" @tap="switchTab(index)">
      <image class="tabbar_icon" :src="index == currentTabIndex ? item.selectedIconPath : item.iconPath"></image>
      <text>{{item.text}}</text>
    </navigator>
  </block>
</view>
</template>

<script>
// tabBarComponent/tabBar.js
const app = getApp();
export default {
  data() {
    return {
      isIphoneX: app.globalData.isIphoneX,
				tabbar:{
				"backgroundColor": "#ffffff",
				"color": "#979795",
				"selectedColor": "#FF6F34",
				"list": [{
					"pagePath": "/pages/home/index",
					"iconPath": "../static/tabbarComponent/icon/home.png",
					"selectedIconPath": "../static/tabbarComponent/icon/home-a.png",
					"text": "首页"
				}, {
					"pagePath": "/pages/demandHall/index",
					"iconPath": "../static/tabbarComponent/icon/tab2.png",
					"selectedIconPath": "../static/tabbarComponent/icon/tab2-a.png",
					"text": "供需大厅"
				}, {
					"pagePath": "/pages/release/index",
					"iconPath": "../static/tabbarComponent/icon/icon_release.png",
					"isSpecial": true,
					"text": "发布"
				}, {
					"pagePath": "/pages/life/index",
					"iconPath": "../static/tabbarComponent/icon/tab3.png",
					"selectedIconPath": "../static/tabbarComponent/icon/tab3-a.png",
					"text": "生活"
				}, {
					"pagePath": "/pages/user/index",
					"iconPath": "../static/tabbarComponent/icon/tab4.png",
					"selectedIconPath": "../static/tabbarComponent/icon/tab4-a.png",
					"text": "我的"
				}]
			},
			currentTabIndex: this.current
    };
  },
  components: {},
  props: {
		pagePath:{
			type: String,
			default:''
		},
		current: { type: [Number, String], default: 0 },
  },
	mounted() {
		// console.log(this.pagePath)
	},
  methods: {
		switchTab(index){
			// console.log(index)
			// this.currentTabIndex = index
			this.$emit('click', index)
		}
	}
};
</script>
<style>
.tabbar_box{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 98rpx;
  box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04);
}
.tabbar_box.iphoneX-height{
    padding-bottom: 66rpx;
    height: 170rpx;
}
.middle-wrapper{
  position: absolute;
  right: 50%;
  margin-left: -60rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  /* border-top: 2rpx solid #f2f2f3; */
  /* box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04); */
}
.middle-wrapper.iphoneX-height{
  bottom: 66rpx;
}
.tabbar_nav{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  height: 100%;
  position: relative;
}
.tabbar_icon{
  width: 52rpx;
  height: 52rpx;
}
.special-wrapper{
  position: absolute;
  top: -36rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  /* border-top: 2rpx solid #f2f2f3; */
  box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04);
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}
.special-wrapper .tabbar_icon{
    width: 84rpx;
    height: 84rpx;
}
.special-text-wrapper{
  width: 56rpx;
  height: 56rpx;
}
</style>