uniapp 封装凸起导航栏

my-tabbar.vue

<template><view><view class="tabbar-container" :class="isIpx ? 'IpxBot' : ''"><view class="tabbar-item" v-for="(item, index) in tabList" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index"><view class="item-top" :style="{ padding: item.id == 2 ? 0 : '8rpx' }"><image :src="tabId === item.id ? item.selectIcon : item.icon" mode=""></image></view><viewclass="item-bottom":style="[{ color: item.id == 2 ? '#fa3f22' : '' }, { fontWeight: item.id == 2 ? '700' : 'unset' }]":class="[tabId === item.id ? 'item-active' : '']"><text>{{ item.text }}</text></view></view></view></view>
</template><script>
export default {props: {currentPage: {type: Number,default: 0}},data() {return {isIpx: false,tabId: 0,tabList: [{id: 0,path: '/pages/family/index',icon: '/static/tabBar/home.png',selectIcon: '/static/tabBar/homeon.png',text: '我的',centerItem: false},{id: 1,path: '/pages/task/index',icon: '/static/tabBar/TASKHAII.png',selectIcon: '/static/tabBar/TASKHAIIon.png',text: '展示',centerItem: false},{id: 2,path: '/pages/vip/index',icon: '/static/tabBar/vip.png',selectIcon: '/static/tabBar/vip.png',text: 'VIP',centerItem: true},{id: 3,path: '/pages/record/index',icon: '/static/tabBar/record.png',selectIcon: '/static/tabBar/recordon.png',text: '入驻',centerItem: false},{id: 4,path: '/pages/me/index',icon: '/static/tabBar/my.png',selectIcon: '/static/tabBar/myon.png',text: '我的',centerItem: false}]};},mounted() {this.tabId = this.currentPage;uni.hideTabBar();},created() {let that = this;uni.getSystemInfo({success: function(res) {if (res.model.indexOf('iPhone X') !== -1) {that.isIpx = true;}}});},methods: {changeItem(item) {this.tabId = item.id;uni.navigateTo({url: item.path});}}
};
</script>
<style scoped>
view {padding: 0;margin: 0;box-sizing: border-box;
}.tabbar-container {position: fixed;bottom: 0;left: 0;width: 100%;/* height: 100rpx; *//* box-shadow: 0 0 5px #999; */display: flex;align-items: center;padding: 5rpx 0;color: #999999;background-color: #ffffff;
}.tabbar-container .tabbar-item {width: 20%;height: 100rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;
}.tabbar-container .item-active {color: #f5cb2b;
}.tabbar-container .center-item {display: block;position: relative;
}.tabbar-container .tabbar-item .item-top {width: 70rpx;height: 70rpx;padding: 5rpx;
}.tabbar-container .center-item .item-top {flex-shrink: 0;width: 78rpx;height: 84rpx;position: absolute;top: -28rpx;left: calc(50% - 40rpx);border-radius: 50%;/* box-shadow: 0 0 5px #999; */background-color: #ffffff;
}.tabbar-container .tabbar-item .item-top image {width: 100%;height: 100%;
}.tabbar-container .tabbar-item .item-bottom {font-size: 25rpx;width: 100%;
}.tabbar-container .center-item .item-bottom {position: absolute;bottom: 2rpx;
}/* 适配iPhone X */
.IpxBot {padding-bottom: 30rpx !important;
}
</style>

family.vue

<template><view class=""><my-tabbar :currentPage="0"></my-tabbar></view>
</template><script>
</script><style>
</style>