flat: 新页面

components/CustomTabbar/custom_tabbar.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="tabbar_container">
+		<view class="tabbar_item" v-for="(item, index) in tabbarList"  :key="index" @click="changeItem(item)">
+			<view class="item-top" >
+				<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"
+				:class="[item.centerItem ? 'center-item-img' : '']"></image>
+			</view>	
+			<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
+				<text>{{ item.text }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+    let listSrc = require('../../static/img/tabbar/list.png');
+    let listSrc2 = require('../../static/img/tabbar/avtiveList.png');
+    let newsSrc = require('../../static/img/tabbar/news.png');
+    let newsSrc2 = require('../../static/img/tabbar/activeNews.png');
+    let recruitSrc = require('../../static/img/tabbar/recruit.png');
+    let recruitSrc2 = require('../../static/img/tabbar/activeRecruit.png');
+	export default {
+		data() {
+			return {
+				currentItem: 0,
+				tabbarList: [{
+					id: 0,
+					text: "招工列表",
+					path: '/pages/recruit/subPage/index',
+					iconPath: listSrc2,
+					selectedIconPath: listSrc,
+					centerItem: false,
+				},
+				{
+					id: 1,
+					text: "发布招工",
+					path: '/pages/recruit/subPage/recruit',
+					iconPath: recruitSrc2,
+					selectedIconPath:recruitSrc,
+					centerItem: true,
+				},
+				{
+					id: 2,
+					text: "消息",
+					path: '/pages/recruit/subPage/MessageList',
+					iconPath: newsSrc2,
+					selectedIconPath: newsSrc,
+					centerItem: false,
+				}],
+			}
+		},
+		props: {
+			currentpage: {
+				type: Number,
+				required: true,
+				default: 0,
+			}
+		},
+		mounted() {
+			this.currentItem = this.currentpage
+			uni.hideTabBar()
+		},
+		methods: {
+			changeItem(item) {
+				// uni.switchTab({
+				// 	url: item.path
+				// })
+                uni.navigateTo({
+                    url: item.path
+                })
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tabbar_container{
+		background-color: #FFFFFF;
+		position: fixed;
+		bottom: 0rpx;
+		left: 0rpx;
+		width: 100%;
+		height: 100rpx;
+		box-shadow: 0 0 5px #999;
+		display: flex;
+		align-items: center;
+		padding: 5rpx 0;
+		padding-bottom: env(safe-area-inset-bottom);
+		.tabbar_item{
+			width: 33.33%;
+			height: 100rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+			position: relative;
+			.item-top{
+				width: 48rpx;
+				height: 48rpx;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.item-bottom{
+                font-size: 24rpx;
+			}
+		}
+	}
+	.center-item-img{
+		position: absolute;
+		top: -58rpx;
+		left: calc(50% - 53rpx);
+		width: 106rpx !important;
+		height: 106rpx !important;
+	}
+	.item-active{
+		color: #4071f8;
+	}
+</style>