uniapp自定义tabbar组件解决闪烁问题

小轻知

已于 2024-12-20 18:12:06 修改

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

于 2022-05-18 12:57:11 首次发布

本文链接：https://blog.csdn.net/m0_47843571/article/details/124840121

本文介绍了如何在uniapp中自定义tabbar组件，通过在pages.json配置和在app.js设置隐藏原生tabbar，以及在组件内实现页面跳转，有效解决了tabbar闪烁的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义tabbar组件，根据uni-app的easycom将其精简为- 步。只要组件安装在项目的components目录下或uni_ modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

<template>
	<view class="tabbar-box">
		<u-tabbar :value="value1" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item v-for="(Item, Index) in list" :key="Index" :text="Item.title" :icon="Item.icon"
				@click="tabbarclick(Item,Index)"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 0, // tabbar--高亮数据
				// tabbar--data数据
				list: [{
						title: '首页',
						url: 'pages/index/index',
						icon: 'home'
					},
					{
						title: '项目进度',
						url: 'pages/schedule/index',
						icon: 'photo'
					},
					{
						title: '项目投资',
						url: 'pages/investment/index',
						icon: 'play-right'
					},
					{
						title: '我的',
						url: 'pages/Personal/index',
						icon: 'account'
					},
				]
			}
		},

		created() {
			let pages = getCurrentPages() //获取加载的页面
			let currentPage = pages[pages.length - 1] //获取当前页面的对象
			let url = currentPage.route //当前页面url
			console.log(url)
			this.list.forEach((e, i) => {
			console.log(e.url == url)
				if (e.url == url) {

					this.value1 = i
				}
			})
		},
		methods: {
			// tabar--点击事件
			tabbarclick(val, i) {
				let pages = getCurrentPages() //获取加载的页面
				let currentPage = pages[pages.length - 1] //获取当前页面的对象
				let url = currentPage.route //当前页面url
				// 判断路由跟url是否不同
				if (url != val.url) {
					uni.switchTab({
						url: '/'+val.url,
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>

在pages.json配置tabbar，路径设置成一样

"tabBar": {
		"backgroundColor": "#F3F2F0",
		"borderStyle": "white",
		"display": "none",
		"list": [{
				"text": "",
				"pagePath": "pages/index/index"
			},
			{
				"text": "",
				"pagePath": "pages/schedule/index"
			},
			{
				"text": "",
				"pagePath": "pages/investment/index"
			},
			{
				"text": "",
				"pagePath": "pages/Personal/index"
			}

		]
	}

在app里面设置隐藏tabbar

	onShow: function() {
		uni.hideTabBar()
	},

自定义组件组件种使用uni.switchTab跳转页面

uni.switchTab({
						url: val.url,
					})

完美解决