uniapp自定义底部tabBar

使用场景:在一个非tabbar页面,想要有底部导航效果,故自定义效果,系统原底部导航栏仍在正常使用

效果:

布局:

html 复制代码
<template>
	<view class="tab-bar" :style="{height: height + 'px'}">
		<view v-for="(item, index) in tabBars" :key="index" @click="switchTab(item)"
			:style="{color: index === selectIndex ? item.selectedTextColor : item.textColor}">
			<view style="display: flex; justify-content: center;">
				<image :src="index === selectIndex ? item.selectedIconPath : item.iconPath" style="height: 25px; width: 25px;"></image>
			</view>
			<view style="margin-top: 2px; font-size: 12px;">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabBar",
		props: {
			tabBars: {
				type: Array,
				required: true
			},
			selectIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				height: undefined
			};
		},
		methods: {
			switchTab(item) {
				if (this.getCurrentPageIndex() !== item.pagePath) {
					uni.redirectTo({
						url: item.pagePath
					});
				}
			},
			getCurrentPageIndex() {
				const pages = getCurrentPages();
				return pages[pages.length - 1].route;
			}
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			let tabBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight;
			this.height = tabBarHeight
		}
	}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-around;
  position: fixed;
  height: 5vh;
  bottom: 0;
  width: 100%;
  background-color: #fbfcfe;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 3px;
  padding-bottom: 2px;
}
</style>

使用:

html 复制代码
<tabBar :tab-bars="approvalTabbar" :selectIndex="1"></tabBar>
// selectIndex 是当前页面的数组下标
approvalTabbar = [
	{
		iconPath: '/static/icon/mess.png',
		selectedIconPath:'/static/icon/mess-selected.png',
		text: "发起申请",
		pagePath:'/pages/approval/launch/launch',
		textColor: tabTextColor,
		selectedTextColor: tabSelectedTextColor
	},
	{
		iconPath: '/static/icon/approval-mine.png',
		selectedIconPath:'/static/icon/approval-mine-selected.png',
		text: "我审批的",
		pagePath:'/pages/approval/accraditation/accraditation',
		textColor: tabTextColor,
		selectedTextColor: tabSelectedTextColor
	},
	{
		iconPath: '/static/icon/submit.png',
		selectedIconPath:'/static/icon/submit-selected.png',
		text: "已提交",
		pagePath:'/pages/approval/submit/submit',
		textColor: tabTextColor,
		selectedTextColor: tabSelectedTextColor
	}
]

不足之处:

1.需要在参与跳转的每个页面引入组件

2.引入时需要传递相同的tabs数组数据、页面与数组对应的下标

3.页面跳转后会重绘底部导航栏,出现闪的问题

相关推荐
耶啵奶膘1 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界16 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨16 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆16 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0116 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程1 天前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_1 天前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
伊泽瑞尔.2 天前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app