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