From 01a158c99b5fe287620a5ee260342e1f5f9fa9ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com>
Date: Tue, 16 Jan 2024 16:57:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                            |   5 +-
 components/customTabBar/index.js   |   0
 components/customTabBar/index.json |   0
 components/customTabBar/index.vue  | 148 +++++++++++++++++++++++++++++
 components/customTabBar/index.wxml |  86 +++++++++++++++++
 components/customTabBar/index.wxss |   0
 package-lock.json                  |   3 +
 pages.json                         |   5 +-
 8 files changed, 244 insertions(+), 3 deletions(-)
 create mode 100644 components/customTabBar/index.js
 create mode 100644 components/customTabBar/index.json
 create mode 100644 components/customTabBar/index.vue
 create mode 100644 components/customTabBar/index.wxml
 create mode 100644 components/customTabBar/index.wxss
 create mode 100644 package-lock.json

diff --git a/App.vue b/App.vue
index 1875ee6..0bbea7f 100644
--- a/App.vue
+++ b/App.vue
@@ -2,7 +2,10 @@
 	export default {
 		onLaunch: function() {
 			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
-			console.log('App Launch')
+			console.log('App Launch')
+			
+			// 程序加载 隐藏默认的tabBar
+			uni.hideTabBar();
 		},
 		onShow: function() {
 			console.log('App Show')
diff --git a/components/customTabBar/index.js b/components/customTabBar/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/components/customTabBar/index.json b/components/customTabBar/index.json
new file mode 100644
index 0000000..e69de29
diff --git a/components/customTabBar/index.vue b/components/customTabBar/index.vue
new file mode 100644
index 0000000..0854ebc
--- /dev/null
+++ b/components/customTabBar/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <view class="tabbar-container">
+    <block>
+      <!-- 针对中间的导航栏  通过true来判断控制类名和样式 -->
+      <view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index">
+        <view class="item-top">
+          <image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
+        </view>
+        <!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
+        <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
+          <text>{{ item.text }}</text>
+        </view>
+      </view>
+    </block>
+  </view>
+</template>
+
+<script>
+// 组件的书写符合easycom规范 无需引入直接使用
+export default {
+  props: {
+    currentPage: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      currentItem: 0,
+      tabbarList: [
+        {
+          id: 0,
+          path: '/pages/index/index',
+          // icon: '/static/template.png',
+          // selectIcon: '/static/templateHL.png',
+          text: '首页',
+          centerItem: false
+        },
+        {
+          id: 1,
+          path: '/pages/midell/index',
+          // icon: '/static/api.png',
+          // selectIcon: '/static/apiHL.png',
+          text: '中间',
+          // 通过类名class控制样式大小
+          centerItem: true
+        },
+        {
+          id: 2,
+          path: '/pages/mine/index',
+          // icon: '/static/component.png',
+          // selectIcon: '/static/componentHL.png',
+          text: '我的',
+          centerItem: false
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.currentItem = this.currentPage
+    // 隐藏原来的tabBar导航栏
+    uni.hideTabBar()
+  },
+  methods: {
+    changeItem (item) {
+      let _this = this
+      //_this.currentItem = item.id;
+      uni.switchTab({
+        url: item.path
+      })
+    }
+  }
+};
+</script>
+<style lang="less" scope>
+view {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.tabbar-container {
+  position: fixed;
+  bottom: 0rpx;
+  left: 0rpx;
+  width: 100%;
+  height: 110rpx;
+  box-shadow: 0 0 5px #999;
+  display: flex;
+  align-items: center;
+  padding: 5rpx 0;
+  color: #999999;
+
+  /* 针对tabbar的统一处理 */
+  .tabbar-item {
+    width: 33.33%;
+    height: 100rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    .item-top {
+      width: 70rpx;
+      height: 70rpx;
+      padding: 10rpx;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    // 未被选中的导航栏字体
+    .item-bottom {
+      font-size: 28rpx;
+      width: 100%;
+    }
+    // 被选中的导航栏字体
+    .item-active {
+      color: #f00;
+    }
+  }
+
+  // 最中间的tabbar导航栏
+  .center-item {
+    display: block;
+    position: relative;
+    .item-top {
+      flex-shrink: 0;
+      width: 100rpx;
+      height: 100rpx;
+      position: absolute;
+      top: -50rpx;
+      left: calc(50% - 50rpx);
+      border-radius: 50%;
+      box-shadow: 0 0 5px #999;
+      background-color: rgb(240, 63, 131);
+    }
+    .item-bottom {
+      position: absolute;
+      bottom: 5rpx;
+    }
+    .item-active {
+      position: absolute;
+      bottom: 5rpx;
+      color: #1fff;
+    }
+  }
+}
+</style>
diff --git a/components/customTabBar/index.wxml b/components/customTabBar/index.wxml
new file mode 100644
index 0000000..9b0c013
--- /dev/null
+++ b/components/customTabBar/index.wxml
@@ -0,0 +1,86 @@
+<template>
+	<view class="tab-bar">
+		<view class="content">
+			<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
+				<view>
+					<view class="tab-img">
+						<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
+						<image v-else class="img" :src="item.iconPath"></image>
+					</view>
+				</view>
+				<view v-if="routePath === item.pagePath" class="tit selectTexts">{{ item.text }}</view>
+				<view v-else class="tit texts">{{ item.text }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+ 
+<script>
+export default {
+	props: {
+		// 底部导航栏数据
+		tabBarList: {
+			type: Array,
+			required: true
+		},
+		// 当前页面路径
+		routePath: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		selectTabBar(path) {
+			this.$emit('onTabBar', path)
+		}
+	}
+};
+</script>
+ 
+<style lang="scss">
+.tab-bar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100vw;
+	padding-top: 10rpx;
+	padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+	background-color: #fff;
+ 
+	.content {
+		display: flex;
+ 
+		.one-tab {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 50%;
+ 
+			.tab-img {
+				width: 50rpx;
+				height: 50rpx;
+ 
+				.img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+ 
+			.tit {
+				font-size: 30rpx;
+				transform: scale(0.7);
+			}
+			.selectTexts{
+			color:#1890e1;	
+			}
+			.texts{
+				color: block;
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components/customTabBar/index.wxss b/components/customTabBar/index.wxss
new file mode 100644
index 0000000..e69de29
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/pages.json b/pages.json
index dcf5967..70866f8 100644
--- a/pages.json
+++ b/pages.json
@@ -57,7 +57,8 @@
 			}
 		]
 	},
-	"tabBar":{
+	"tabBar":{
+		"custom":true,
 		"color": "#7A7E83",
 		"selectedColor": "#3cc51f",
 		"borderStyle": "black",
@@ -74,5 +75,5 @@
 				"text":"我的"
 			}
 		]
-	}
+	}
 }