devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 、vue2/3自定义底部 tabbar 导航栏凹凸透明显示，高级效果。（兼容h5、微信小程序、app）_uniapp自定义底部tabbar

作者：知新_RL | 2024-08-12 17:03:15

赞

踩

uniapp自定义底部tabbar

目录

1.项目介绍

2.不同端的效果展示图

2.1无底部安全区域：

2.2有底部安全区域：

3. 代码编写

3.1 html 代码部分：

3.2 html 核心代码：

3.3 css 代码部分：

3.4 css 核心代码：

3.5 vue2 代码编写：

3.6 vue3 代码编写：

3.7 vue2/3 核心代码：

3.8 Tabbar 组件的使用：

4. vue2 完整代码

5. vue3 完整代码

1.项目介绍

项目描述：uniapp 使用 vue2/3，自定义封装 tabbar，底部凹凸透明显示。兼容h5、微信小程序、app等。html 和 css 部分代码一样，只有 js 功能代码，分别使用 vue2 和 vue3 的写法。

兼容性：h5、微信小程序、app端兼容，其他端没有测试过，应该也兼容的。

技术栈：uniapp + vue2 /3。

2.不同端的效果展示图

2.1无底部安全区域：

在h5端，底部是没有安全区域的，效果图如下：

h5端，无底部安全区域效果图

2.2有底部安全区域：

在微信小程序端和 app端中，苹果手机底部可能会有安全区域，效果图如下

微信小程序和app中，底部安全区域显示效果图

3. 代码编写

3.1 html 代码部分：

  1. <template>
  2. 	<view class="tabbar" :style="`--repeat: ${tabbar.length}`">
  3. 		<view class="tabbar-nav">
  4. 			<view class="tabbar-nav-a" v-for="(item, index) in tabbar" :key="index"
  5. 				:class="pageIndex == index ? 'after' : ''" @tap="tapTabbar(item, index)">
  6. 				<view class="after-icon" v-if="pageIndex == index">
  7. 					<uni-icons :type="item.selectedIconPath" size="60rpx" color="#fff"></uni-icons>
  8. 				</view>
  9. 				<uni-icons :type="item.iconPath" size="48rpx" v-else></uni-icons>
  10. 				<text class="text">{{ item.text }}</text>
  11. 			</view>
  12. 		</view>
  13. 		<view class="safeZone" :style="{ 'height': safeAreaInsetsBottom }"></view>
  14. 	</view>
  15. 	<view :style="{ 'height': tabbarHeight }"></view>
  16. </template>

3.2 html 核心代码：

:style="`--repeat: ${tabbar.length}`" ：tabbar的数量，根据数组的长度改变。

:style="{ 'height': safeAreaInsetsBottom }" ：底部安全区域的高度。

:style="{ 'height': tabbarHeight }"：tabbar导航栏的高度，防止内容被遮挡。

3.3 css 代码部分：

  1. <style lang="scss" scoped>
  2. .tabbar {
  3. 	--width: 100rpx;
  4. 	--height: 100rpx;
  5. 	--size: 60rpx;
  6. 	--repeat: 4;
  7. 	--color: #FC536E;
  8. 	--radius: 20rpx;
  9. 	--rgba: rgba(255, 255, 255, 0.95);
  10. 	position: fixed;
  11. 	width: 100%;
  12. 	bottom: 0;
  13. 	z-index: 999;
  14.  
  15. 	.tabbar-nav {
  16. 		display: grid;
  17. 		grid-template-columns: repeat(var(--repeat), 1fr);
  18.  
  19. 		.tabbar-nav-a {
  20. 			display: flex;
  21. 			flex-direction: column;
  22. 			align-items: center;
  23. 			justify-content: flex-end;
  24. 			padding: 4rpx 0;
  25. 			position: relative;
  26. 			height: var(--height);
  27. 			background-color: var(--rgba);
  28. 			box-sizing: border-box;
  29. 			filter: drop-shadow(2rpx -2rpx 2rpx rgba(0, 0, 0, 0.1));
  30. 			font-size: 24rpx;
  31.  
  32. 			&:nth-child(1) {
  33. 				border-top-left-radius: var(--radius);
  34. 			}
  35.  
  36. 			&:nth-last-child(1) {
  37. 				border-top-right-radius: var(--radius);
  38. 			}
  39. 		}
  40.  
  41. 		.after {
  42. 			background: radial-gradient(circle at center top, transparent var(--size), var(--rgba) 0)center top;
  43.  
  44. 			.after-icon {
  45. 				width: var(--width);
  46. 				height: var(--height);
  47. 				background-color: var(--color);
  48. 				border-radius: 50%;
  49. 				position: absolute;
  50. 				left: 50%;
  51. 				top: 0;
  52. 				transform: translate(-50%, -50%);
  53. 				display: flex;
  54. 				align-items: center;
  55. 				justify-content: center;
  56. 			}
  57.  
  58. 			text {
  59. 				color: var(--color);
  60. 			}
  61. 		}
  62. 	}
  63.  
  64. 	.safeZone {
  65. 		background-color: var(--rgba);
  66. 	}
  67. }
  68. </style>

3.4 css 核心代码：

background: radial-gradient(circle at center top, transparent var(--size), var(--rgba) 0)center top；凹凸透明显示，最主要就是靠这行样式代码。

--repeat: 4;：控制 tabbar 的数量

3.5 vue2 代码编写：

  1. <script>
  2. export default {
  3. 	name: "Tabbar",
  4. 	props: {
  5. 		pageIndex: {
  6. 			type: Number,
  7. 			default: 0,
  8. 		}
  9. 	},
  10. 	data() {
  11. 		return {
  12. 			tabbarHeight: '',
  13. 			safeAreaInsetsBottom: '',
  14. 			tabbar: [{
  15. 				iconPath: "heart",
  16. 				selectedIconPath: "heart-filled",
  17. 				text: "爱吧",
  18. 				pagePath: "/pages/index/index"
  19. 			},
  20. 			{
  21. 				iconPath: "wallet",
  22. 				selectedIconPath: "wallet-filled",
  23. 				text: "记账",
  24. 				pagePath: "/pages/bookkeeping/bookkeeping"
  25.  
  26. 			},
  27. 			{
  28. 				iconPath: "chat",
  29. 				selectedIconPath: "chat-filled",
  30. 				text: "社区",
  31. 				pagePath: "/pages/community/community"
  32.  
  33. 			},
  34. 			{
  35. 				iconPath: "person",
  36. 				selectedIconPath: "person-filled",
  37. 				text: "我",
  38. 				pagePath: "/pages/my/my"
  39. 			}]
  40. 		}
  41. 	},
  42. 	created() {
  43. 		uni.hideTabBar({ animation: true })
  44. 		let res = uni.getWindowInfo().safeAreaInsets.bottom + 50
  45. 		this.safeAreaInsetsBottom = res + "rpx";
  46. 		this.tabbarHeight = res * 2 + "rpx"
  47. 	},
  48. 	methods: {
  49. 		tapTabbar(val, index) {
  50. 			uni.switchTab({
  51. 				url: val.pagePath
  52. 			})
  53. 		}
  54. 	}
  55.  
  56. }
  57. </script>

3.6 vue3 代码编写：

  1. <script setup>
  2. 	defineOptions({
  3. 		name: "Tabbar"
  4. 	});
  5. 	const tabbarHeight = ref('')
  6. 	const safeAreaInsetsBottom = ref(0)
  7. 	
  8. 	const props = defineProps({
  9. 		pageIndex: {
  10. 			type: Number,
  11. 			default: 0
  12. 		}
  13. 	});
  14. 	const tabbar = reactive([{
  15. 			iconPath: "heart",
  16. 			selectedIconPath: "heart-filled",
  17. 			text: "爱吧",
  18. 			pagePath: "/pages/index/index"
  19. 		},
  20. 		{
  21. 			iconPath: "wallet",
  22. 			selectedIconPath: "wallet-filled",
  23. 			text: "记账",
  24. 			pagePath: "/pages/bookkeeping/bookkeeping"
  25.  
  26. 		},
  27. 		{
  28. 			iconPath: "chat",
  29. 			selectedIconPath: "chat-filled",
  30. 			text: "社区",
  31. 			pagePath: "/pages/community/community"
  32.  
  33. 		},
  34. 		{
  35. 			iconPath: "person",
  36. 			selectedIconPath: "person-filled",
  37. 			text: "我",
  38. 			pagePath: "/pages/my/my"
  39. 		}
  40.  
  41. 	])
  42. 	onMounted(() => {
  43. 		uni.hideTabBar({ animation: true })
  44. 		let res = uni.getWindowInfo().safeAreaInsets.bottom
  45. 		safeAreaInsetsBottom.value = res * 2 + "rpx";
  46. 		tabbarHeight.value = res + 50 * 2 + "rpx";
  47. 	});
  48. 	const tapTabbar = (val, index) => {
  49. 		uni.switchTab({
  50. 			url: val.pagePath
  51. 		})
  52. 	}
  53. </script>

3.7 vue2/3 核心代码：

uni.hideTabBar({ animation: true })  ：隐藏默认的 tabBar 。

let res = uni.getWindowInfo().safeAreaInsets.bottom ：获取底部安全区域的高度，返回px单位。

this.safeAreaInsetsBottom = res * 2 + "rpx"：将高度 px单位 转为 rpx单位。

this.tabbarHeight = res + 50 * 2 + "rpx" ：(底部安全区域高度 + 导航栏自身高度）转 rpx单位。

3.8 Tabbar 组件的使用：

<Tabbar :pageIndex="0"></Tabbar>

:pageIndex="0"：用于控制激活状态，高亮显示。

4. vue2 完整代码

  1. <template>
  2. 	<view class="tabbar" :style="`--repeat: ${tabbar.length}`">
  3. 		<view class="tabbar-nav">
  4. 			<view class="tabbar-nav-a" v-for="(item, index) in tabbar" :key="index"
  5. 				:class="pageIndex == index ? 'after' : ''" 
  6. 				@tap="tapTabbar(item, index)">
  7. 				<view class="after-icon" v-if="pageIndex == index">
  8. 					<uni-icons size="60rpx" color="#fff" 
  9. 					:type="item.selectedIconPath" ></uni-icons>
  10. 				</view>
  11. 				<uni-icons :type="item.iconPath" size="48rpx" v-else></uni-icons>
  12. 				<text class="text">{{ item.text }}</text>
  13. 			</view>
  14. 		</view>
  15. 		<view class="safeZone" :style="{ 'height': safeAreaInsetsBottom }"></view>
  16. 	</view>
  17. 	<view :style="{ 'height': tabbarHeight }"></view>
  18. </template>
  19. <script>
  20. export default {
  21. 	name: "Tabbar",
  22. 	props: {
  23. 		pageIndex: {
  24. 			type: Number,
  25. 			default: 0,
  26. 		}
  27. 	},
  28. 	data() {
  29. 		return {
  30. 			tabbarHeight: '',
  31. 			safeAreaInsetsBottom: '',
  32. 			tabbar: [{
  33. 				iconPath: "heart",
  34. 				selectedIconPath: "heart-filled",
  35. 				text: "爱吧",
  36. 				pagePath: "/pages/index/index"
  37. 			},
  38. 			{
  39. 				iconPath: "wallet",
  40. 				selectedIconPath: "wallet-filled",
  41. 				text: "记账",
  42. 				pagePath: "/pages/bookkeeping/bookkeeping"
  43.  
  44. 			},
  45. 			{
  46. 				iconPath: "chat",
  47. 				selectedIconPath: "chat-filled",
  48. 				text: "社区",
  49. 				pagePath: "/pages/community/community"
  50.  
  51. 			},
  52. 			{
  53. 				iconPath: "person",
  54. 				selectedIconPath: "person-filled",
  55. 				text: "我",
  56. 				pagePath: "/pages/my/my"
  57. 			}]
  58. 		}
  59. 	},
  60. 	created() {
  61. 		uni.hideTabBar({ animation: true })
  62. 		let res = uni.getWindowInfo().safeAreaInsets.bottom
  63. 		this.safeAreaInsetsBottom = res * 2 + "rpx";
  64. 		this.tabbarHeight = res + 50 * 2 + "rpx"
  65. 	},
  66. 	methods: {
  67. 		tapTabbar(val, index) {
  68. 			uni.switchTab({
  69. 				url: val.pagePath
  70. 			})
  71. 		}
  72. 	}
  73.  
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. .tabbar {
  78. 	--width: 100rpx;
  79. 	--height: 100rpx;
  80. 	--size: 60rpx;
  81. 	--repeat: 4;
  82. 	--color: #FC536E;
  83. 	--radius: 20rpx;
  84. 	--rgba: rgba(255, 255, 255, 0.95);
  85. 	position: fixed;
  86. 	width: 100%;
  87. 	bottom: 0;
  88. 	z-index: 999;
  89.  
  90. 	.tabbar-nav {
  91. 		display: grid;
  92. 		grid-template-columns: repeat(var(--repeat), 1fr);
  93.  
  94. 		.tabbar-nav-a {
  95. 			display: flex;
  96. 			flex-direction: column;
  97. 			align-items: center;
  98. 			justify-content: flex-end;
  99. 			padding: 4rpx 0;
  100. 			position: relative;
  101. 			height: var(--height);
  102. 			background-color: var(--rgba);
  103. 			box-sizing: border-box;
  104. 			filter: drop-shadow(2rpx -2rpx 2rpx rgba(0, 0, 0, 0.1));
  105. 			font-size: 24rpx;
  106.  
  107. 			&:nth-child(1) {
  108. 				border-top-left-radius: var(--radius);
  109. 			}
  110.  
  111. 			&:nth-last-child(1) {
  112. 				border-top-right-radius: var(--radius);
  113. 			}
  114. 		}
  115.  
  116. 		.after {
  117. 			background: radial-gradient(circle at center top, 
  118. 			transparent var(--size), var(--rgba) 0)center top;
  119.  
  120. 			.after-icon {
  121. 				width: var(--width);
  122. 				height: var(--height);
  123. 				background-color: var(--color);
  124. 				border-radius: 50%;
  125. 				position: absolute;
  126. 				left: 50%;
  127. 				top: 0;
  128. 				transform: translate(-50%, -50%);
  129. 				display: flex;
  130. 				align-items: center;
  131. 				justify-content: center;
  132. 			}
  133.  
  134. 			text {
  135. 				color: var(--color);
  136. 			}
  137. 		}
  138. 	}
  139.  
  140. 	.safeZone {
  141. 		background-color: var(--rgba);
  142. 	}
  143. }
  144. </style>

5. vue3 完整代码

  1. <template>
  2. 	<view class="tabbar" :style="`--repeat: ${tabbar.length}`">
  3. 		<view class="tabbar-nav">
  4. 			<view class="tabbar-nav-a" v-for="(item, index) in tabbar" :key="index"
  5. 				:class="pageIndex == index ? 'after' : ''" 
  6. 				@tap="tapTabbar(item, index)">
  7. 				<view class="after-icon" v-if="pageIndex == index">
  8. 					<uni-icons size="60rpx" color="#fff" 
  9. 					:type="item.selectedIconPath">	
  10. 					</uni-icons>
  11. 				</view>
  12. 				<uni-icons :type="item.iconPath" size="48rpx" v-else></uni-icons>
  13. 				<text class="text">{{ item.text }}</text>
  14. 			</view>
  15. 		</view>
  16. 		<view class="safeZone" :style="{ 'height': safeAreaInsetsBottom }"></view>
  17. 	</view>
  18. 	<view :style="{ 'height': tabbarHeight }"></view>
  19. </template>
  20. <script setup>
  21. 	defineOptions({
  22. 		name: "Tabbar"
  23. 	});
  24. 	const tabbarHeight = ref('')
  25. 	const safeAreaInsetsBottom = ref(0)
  26. 	
  27. 	const props = defineProps({
  28. 		pageIndex: {
  29. 			type: Number,
  30. 			default: 0
  31. 		}
  32. 	});
  33. 	const tabbar = reactive([{
  34. 			iconPath: "heart",
  35. 			selectedIconPath: "heart-filled",
  36. 			text: "爱吧",
  37. 			pagePath: "/pages/index/index"
  38. 		},
  39. 		{
  40. 			iconPath: "wallet",
  41. 			selectedIconPath: "wallet-filled",
  42. 			text: "记账",
  43. 			pagePath: "/pages/bookkeeping/bookkeeping"
  44.  
  45. 		},
  46. 		{
  47. 			iconPath: "chat",
  48. 			selectedIconPath: "chat-filled",
  49. 			text: "社区",
  50. 			pagePath: "/pages/community/community"
  51.  
  52. 		},
  53. 		{
  54. 			iconPath: "person",
  55. 			selectedIconPath: "person-filled",
  56. 			text: "我",
  57. 			pagePath: "/pages/my/my"
  58. 		}
  59.  
  60. 	])
  61. 	onMounted(() => {
  62. 		uni.hideTabBar({ animation: true })
  63. 		let res = uni.getWindowInfo().safeAreaInsets.bottom
  64. 		safeAreaInsetsBottom.value = res * 2 + "rpx";
  65. 		tabbarHeight.value = res + 50 * 2 + "rpx";
  66. 	});
  67. 	const tapTabbar = (val, index) => {
  68. 		uni.switchTab({
  69. 			url: val.pagePath
  70. 		})
  71. 	}
  72. </script>
  73. <style lang="scss" scoped>
  74. .tabbar {
  75. 	--width: 100rpx;
  76. 	--height: 100rpx;
  77. 	--size: 60rpx;
  78. 	--repeat: 4;
  79. 	--color: #FC536E;
  80. 	--radius: 20rpx;
  81. 	--rgba: rgba(255, 255, 255, 0.95);
  82. 	position: fixed;
  83. 	width: 100%;
  84. 	bottom: 0;
  85. 	z-index: 999;
  86.  
  87. 	.tabbar-nav {
  88. 		display: grid;
  89. 		grid-template-columns: repeat(var(--repeat), 1fr);
  90.  
  91. 		.tabbar-nav-a {
  92. 			display: flex;
  93. 			flex-direction: column;
  94. 			align-items: center;
  95. 			justify-content: flex-end;
  96. 			padding: 4rpx 0;
  97. 			position: relative;
  98. 			height: var(--height);
  99. 			background-color: var(--rgba);
  100. 			box-sizing: border-box;
  101. 			filter: drop-shadow(2rpx -2rpx 2rpx rgba(0, 0, 0, 0.1));
  102. 			font-size: 24rpx;
  103.  
  104. 			&:nth-child(1) {
  105. 				border-top-left-radius: var(--radius);
  106. 			}
  107.  
  108. 			&:nth-last-child(1) {
  109. 				border-top-right-radius: var(--radius);
  110. 			}
  111. 		}
  112.  
  113. 		.after {
  114. 			background: radial-gradient(circle at center top, 
  115. 			transparent var(--size), 
  116. 			var(--rgba) 0)center top;
  117.  
  118. 			.after-icon {
  119. 				width: var(--width);
  120. 				height: var(--height);
  121. 				background-color: var(--color);
  122. 				border-radius: 50%;
  123. 				position: absolute;
  124. 				left: 50%;
  125. 				top: 0;
  126. 				transform: translate(-50%, -50%);
  127. 				display: flex;
  128. 				align-items: center;
  129. 				justify-content: center;
  130. 			}
  131.  
  132. 			text {
  133. 				color: var(--color);
  134. 			}
  135. 		}
  136. 	}
  137.  
  138. 	.safeZone {
  139. 		background-color: var(--rgba);
  140. 	}
  141. }
  142. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/970693
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号