优化底部导航栏

App.vue

@@ -17,4 +17,14 @@
 	@import url('static/fonts/iconfont.css');
 	// 引入uView UI基础样式
 	@import './uni_modules/vk-uview-ui/index.scss';
+	
+	.u-tabbar {
+		.u-tabbar__content {
+			.u-tabbar__content__item__text {
+			  font-size: 20rpx;
+			  line-height: 0rpx;
+				bottom: 0;
+			}
+		}	
+	}
 </style>

pages/chat/chat.vue

@@ -46,13 +46,30 @@
 			</view>
 		</view>
 		<uni-load-more v-show="visualLoadMore" :status="loadMoreStatus"></uni-load-more>
+		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
+		<u-tabbar v-model="tabbarCurrentIndex" :list="tabbarList" icon-size="50" :active-color="tabbarActiveColor" :inactive-color="tabbarInactiveColor"></u-tabbar>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue'
+	import { ref, computed } from 'vue'
 	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
 	import { query, count } from '@/api/chat.js'
+	import { useTabbarStore } from '@/store/tabbarStore.js'
+	const tabbarStore = useTabbarStore()
+	// 底部导航栏数据
+	const tabbarList = computed(() => {
+		return tabbarStore.list
+	})
+	// 底部导航栏选中颜色
+	const tabbarActiveColor = computed(() => {
+		return tabbarStore.activeColor
+	})
+	// 底部导航栏未选中颜色
+	const tabbarInactiveColor = computed(() => {
+		return tabbarStore.inactiveColor
+	})
+	const tabbarCurrentIndex = 1
 	
 	const uToast = ref()
 	
@@ -190,6 +207,7 @@
 		onSearch()
 		count().then(res => {
 			if (res && res.message === 'success') {
+				tabbarStore.setMessageCount(res.data.amount)
 				uni.setTabBarBadge({ //显示数字
 					index: 1, //tabbar下标
 					text: `${res.data.amount}` ?? '0' //数字

pages/index/index.vue

@@ -107,6 +107,8 @@
 				<text>请登录后使用该功能</text>
 			</view>
 		</u-modal>
+		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
+		<u-tabbar v-model="tabbarCurrentIndex" :list="tabbarList" icon-size="50" :active-color="tabbarActiveColor" :inactive-color="tabbarInactiveColor"></u-tabbar>
 	</view>
 </template>
 
@@ -114,7 +116,8 @@
 	import lgSwiper from '@/components/lgSwiper.vue'
 	import {
 		onMounted,
-		ref
+		ref,
+		computed
 	} from 'vue'
 	import {
 		onReady,
@@ -136,6 +139,23 @@
 	import {
 		me
 	} from '@/api/user.js'
+	
+	import { useTabbarStore } from '@/store/tabbarStore.js'
+	const tabbarStore = useTabbarStore()
+	// 底部导航栏数据
+	const tabbarList = computed(() => {
+		return tabbarStore.list
+	})
+	// 底部导航栏选中颜色
+	const tabbarActiveColor = computed(() => {
+		return tabbarStore.activeColor
+	})
+	// 底部导航栏未选中颜色
+	const tabbarInactiveColor = computed(() => {
+		return tabbarStore.inactiveColor
+	})
+	const tabbarCurrentIndex = 0
+	
 	const authStore = useAuthStore()
 	// 屏幕状态栏高度
 	const statusBarHeight = ref(0)
@@ -338,6 +358,7 @@
 	function getCharCount() {
 		count().then(res => {
 			if (res && res.message === 'success') {
+				tabbarStore.setMessageCount(res.data.amount)
 				uni.setTabBarBadge({ //显示数字
 					index: 1, //tabbar下标
 					text: `${res.data.amount}` ?? '0' //数字
@@ -385,7 +406,7 @@
 	})
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>	
 	.container {
 		width: 100vw;
 		background-color: $uni-bg-color;

pages/personalCenter/personalCenter.vue

@@ -172,6 +172,8 @@
 				</view>
 			</view>
 		</u-popup>
+		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
+		<u-tabbar v-model="tabbarCurrentIndex" :list="tabbarList" icon-size="50" :active-color="tabbarActiveColor" :inactive-color="tabbarInactiveColor"></u-tabbar>
 	</view>
 </template>
 
@@ -186,6 +188,22 @@
 	import { getCreditCard, getZhongjie, getAnjie, getIconList, updateIcon } from '@/api/user.js'
 	import { msgError, msgSuccess } from '@/utils/common'
 	
+	import { useTabbarStore } from '@/store/tabbarStore.js'
+	const tabbarStore = useTabbarStore()
+	// 底部导航栏数据
+	const tabbarList = computed(() => {
+		return tabbarStore.list
+	})
+	// 底部导航栏选中颜色
+	const tabbarActiveColor = computed(() => {
+		return tabbarStore.activeColor
+	})
+	// 底部导航栏未选中颜色
+	const tabbarInactiveColor = computed(() => {
+		return tabbarStore.inactiveColor
+	})
+	const tabbarCurrentIndex = 0
+	
 	const authStore = useAuthStore()
 	
 	// 用户信息

store/tabbarStore.js

@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+
+export const useTabbarStore = defineStore('tabbar', {
+	state: () => ({
+		list: [
+			{
+				iconPath: "home",
+				selectedIconPath: "home-fill",
+				text: '首页',
+				count: 0,
+				isDot: false,
+				customIcon: false,
+				pagePath: '/pages/index/index'
+			},
+			{
+				iconPath: "chat",
+				selectedIconPath: "chat-fill",
+				text: '消息',
+				count: 0,
+				isDot: false,
+				customIcon: false,
+				pagePath: '/pages/chat/chat'
+			},
+			{
+				iconPath: "account",
+				selectedIconPath: "account-fill",
+				text: '我的',
+				count: 0,
+				isDot: false,
+				customIcon: false,
+				pagePath: '/pages/personalCenter/personalCenter'
+			},
+		],
+		activeColor: "#0069f6",
+		inactiveColor: '#606266'
+	}),
+	actions: {
+		setMessageCount(count) {
+			this.list[1].count = count
+		},
+		setActiveColor(color) {
+			this.activeColor = color
+		},
+		setInactiveColor(color) {
+			this.inactiveColor = color
+		}
+	}
+})