uniapp 自定义底部tabbar(无闪烁)

最新推荐文章于 2024-05-28 17:59:16 发布
最新推荐文章于 2024-05-28 17:59:16 发布
阅读量423 收藏
点赞数
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsh0409/article/details/134534932
版权

思路：

1.创建自定义的tabbar组件

2.增加启动页面page/index/index

3.在启动页面加载所有tab页面，使用tabbar组件进行切换

主要代码：

mytabbar.vue

<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabList" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__icon" :class="[tabs[item].fontIcon, item == activeTab? 'active':'']"></view>
			<view class="uni-tabbar__label" :class="{'active': item == activeTab}">
				{{tabs[item].text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabList: {
				type: Array,
				default: ['tabMyIndex']
			},
			activeTab: {
				type: String,
				default: ''
			}
		},
		emits:['update:activeTab'],
		data() {
			return {
				tabs: {
					tabAdminIndex: {
						"pagePath": "/pages/admin/index",
						"selectedIconPath": "/static/tabBar/home_col.png",
						"text": "首页",
						"fontIcon": "w-icon-home"
					},
					tabAdminCustom: {
						"pagePath": "/pages/admin/custom",
						"selectedIconPath": "/static/tabBar/home_col.png",
						"text": "客户",
						"fontIcon": "w-icon-qq"
					},
					tabAdminDepartment: {
						"pagePath": "/pages/admin/department",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "部门",
						"fontIcon": "w-icon-user"
					},
					tabAdminPersonnel: {
						"pagePath": "/pages/admin/personnel",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "员工",
						"fontIcon": "w-icon-user"
					},

					tabSaleCustom: {
						"pagePath": "/pages/sale/custom",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "客户",
						"fontIcon": "w-icon-user"
					},

					tabSaleAdminCustom: {
						"pagePath": "/pages/saleadmin/custom",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "客户",
						"fontIcon": "w-icon-user"
					},
					tabSaleAdminPerformance: {
						"pagePath": "/pages/saleadmin/performance",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "业绩",
						"fontIcon": "w-icon-user"
					},
					tabSaleadminPersonnel: {
						"pagePath": "/pages/saleadmin/personnel",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "员工",
						"fontIcon": "w-icon-user"
					},

					tabEvaluateCustom: {
						"pagePath": "/pages/evaluate/custom",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "客户",
						"fontIcon": "w-icon-user"
					},

					tabEvaluateadminCustom: {
						"pagePath": "/pages/evaluateadmin/custom",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "客户",
						"fontIcon": "w-icon-user"
					},
					tabEvaluateadminPerformance: {
						"pagePath": "/pages/evaluateadmin/performance",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "业绩",
						"fontIcon": "w-icon-user"
					},
					tabEvaluateadminPersonnel: {
						"pagePath": "/pages/evaluateadmin/personnel",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "员工",
						"fontIcon": "w-icon-user"
					},

					tabOperationCustom: {
						"pagePath": "/pages/operation/custom",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "客户",
						"fontIcon": "w-icon-user"
					},

					tabOperationadminCustom: {
						"pagePath": "/pages/operationadmin/custom",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "客户",
						"fontIcon": "w-icon-user"
					},
					tabOperationadminPerformance: {
						"pagePath": "/pages/operationadmin/performance",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "业绩",
						"fontIcon": "w-icon-user"
					},
					tabOperationadminPersonnel: {
						"pagePath": "/pages/operationadmin/personnel",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "员工",
						"fontIcon": "w-icon-user"
					},

					tabMyIndex: {
						"pagePath": "/pages/my/index",
						"selectedIconPath": "/static/tabBar/person_col.png",
						"text": "我的",
						"fontIcon": "w-icon-user"
					},
				},
			};
		},
		methods: {
			changeTab(item) {
				this.$emit('update:activeTab', item)
			},
		}
	}
</script>

<style lang="scss" scoped>
	[nvue] uni-scroll-view,
	[nvue] uni-swiper-item,
	[nvue] uni-view {
		flex-direction: unset;
	}

	[nvue-dir-column] uni-swiper-item,
	[nvue-dir-column] uni-view {
		flex-direction: unset;
	}

	.uni-tabbar {
		display: flex;
		position: fixed;
		justify-content: space-around;
		bottom: 0;
		z-index: 999;
		width: 100%;
		height: 101upx;
		padding: 10upx 0;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		border-top: solid 1upx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);

		.uni-tabbar__item {
			display: block;
			line-height: 40upx;
			font-size: 36upx;
			text-align: center;
		}

		.uni-tabbar__icon {
			font-size: 36upx;
			padding-bottom: 4upx;

			&.active {
				color: #1ca6ec;
			}
		}

		.uni-tabbar__label {
			font-size: 30upx;

			&.active {
				color: #1ca6ec;
			}
		}
	}
</style>

page/index/index/vue

<template>
	<view>
		<view class="main">
			<adminIndex v-if="activeTab == 'tabAdminIndex'"></adminIndex>
			<adminCustom v-if="activeTab == 'tabAdminCustom'"></adminCustom>
			<adminDepartment v-if="activeTab == 'tabAdminDepartment'"></adminDepartment>
			<adminPersonnel v-if="activeTab == 'tabAdminPersonnel'"></adminPersonnel>

			<saleCustom v-if="activeTab == 'tabSaleCustom'"></saleCustom>

			<saleadminCustom v-if="activeTab == 'tabSaleAdminCustom'"></saleadminCustom>
			<saleadminPerformance v-if="activeTab == 'tabSaleAdminPerformance'"></saleadminPerformance>
			<saleadminPersonnel v-if="activeTab == 'tabSaleadminPersonnel'"></saleadminPersonnel>

			<evaluateCustom v-if="activeTab == 'tabEvaluateCustom'"></evaluateCustom>

			<evaluateadminCustom v-if="activeTab == 'tabEvaluateadminCustom'"></evaluateadminCustom>
			<evaluateadminPerformance v-if="activeTab == 'tabEvaluateadminPerformance'"></evaluateadminPerformance>
			<evaluateadminPersonnel v-if="activeTab == 'tabEvaluateadminPersonnel'"></evaluateadminPersonnel>

			<operationCustom v-if="activeTab == 'tabOperationCustom'"></operationCustom>

			<operationadminCustom v-if="activeTab == 'tabOperationadminCustom'"></operationadminCustom>
			<operationadminPerformance v-if="activeTab == 'tabOperationadminPerformance'"></operationadminPerformance>
			<operationadminPersonnel v-if="activeTab == 'tabOperationadminPersonnel'"></operationadminPersonnel>

			<my v-if="activeTab == 'tabMyIndex'"></my>
		</view>
		<view class="footer">
			<myTabbar :tabList="tabbar" v-model:activeTab="activeTab"></myTabbar>
		</view>
	</view>
</template>

<script>
	import myTabbar from '@/components/mytabbar.vue'

	import adminIndex from '@/pages/admin/index.vue'
	import adminCustom from '@/pages/admin/custom.vue'
	import adminDepartment from '@/pages/admin/department.vue'
	import adminPersonnel from '@/pages/admin/personnel.vue'

	import saleCustom from '@/pages/sale/custom.vue'

	import saleadminCustom from '@/pages/saleadmin/custom.vue'
	import saleadminPerformance from '@/pages/saleadmin/performance.vue'
	import saleadminPersonnel from '@/pages/saleadmin/personnel.vue'

	import evaluateCustom from '@/pages/evaluate/custom.vue'

	import evaluateadminCustom from '@/pages/evaluateadmin/custom.vue'
	import evaluateadminPerformance from '@/pages/evaluateadmin/performance.vue'
	import evaluateadminPersonnel from '@/pages/evaluateadmin/personnel.vue'

	import operationCustom from '@/pages/operation/custom.vue'

	import operationadminCustom from '@/pages/operationadmin/custom.vue'
	import operationadminPerformance from '@/pages/operationadmin/performance.vue'
	import operationadminPersonnel from '@/pages/operationadmin/personnel.vue'

	import my from '@/pages/my/index.vue'

	export default {
		data() {
			return {
				tabbar: [],
				activeTab: '',
			}
		},
		methods: {},
		onLoad() {
			let _role = localStorage.getItem('token')
			
			console.log(_role)
			if (_role == null || _role == '') {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}

			if (_role == 'admin') {
				this.tabbar = [
					'tabAdminIndex', 'tabAdminCustom', 'tabAdminDepartment', 'tabAdminPersonnel', 'tabMyIndex'
				]
				this.activeTab = 'tabAdminIndex'
			}
			if (_role == 'sale') {
				this.tabbar = [
					'tabSaleCustom', 'tabMyIndex'
				]
				this.activeTab = 'tabSaleCustom'
			}
			if (_role == 'saleadmin') {
				this.tabbar = [
					'tabSaleAdminCustom', 'tabSaleAdminPerformance', 'tabSaleadminPersonnel', 'tabMyIndex'
				]
				this.activeTab = 'tabSaleAdminCustom'
			}
			if (_role == 'evaluate') {
				this.tabbar = [
					'tabEvaluateCustom', 'tabMyIndex'
				]
				this.activeTab = 'tabEvaluateCustom'
			}
			if (_role == 'evaluateadmin') {
				this.tabbar = [
					'tabEvaluateadminCustom', 'tabEvaluateadminPerformance', 'tabEvaluateadminPersonnel',
					'tabMyIndex'
				]
				this.activeTab = 'tabEvaluateadminCustom'
			}
			if (_role == 'operation') {
				this.tabbar = [
					'tabOperationCustom', 'tabMyIndex'
				]
				this.activeTab = 'tabOperationCustom'
			}
			if (_role == 'operationadmin') {
				this.tabbar = [
					'tabOperationadminCustom', 'tabOperationadminPerformance', 'tabOperationadminPersonnel',
					'tabMyIndex'
				]
				this.activeTab = 'tabOperationadminCustom'
			}
		},
		components: {
			myTabbar,
			adminIndex,
			adminCustom,
			adminDepartment,
			adminPersonnel,
			saleCustom,
			saleadminCustom,
			saleadminPerformance,
			saleadminPersonnel,
			evaluateCustom,
			evaluateadminCustom,
			evaluateadminPerformance,
			evaluateadminPersonnel,
			operationCustom,
			operationadminCustom,
			operationadminPerformance,
			operationadminPersonnel,
			my
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: calc(100vh - 101upx);
		overflow-y: scroll;
	}
	.footer {
		height: 101upx;
	}
</style>

page/login/index.vue

<template>
	<view class="page">
		<view class="content">
			<view class="title">用户登录</view>
			<form class="login-form">
				<view class="form-item form-item-inline">
					<text class="w-icon-user"></text>
					<input v-model="loginData.account" placeholder="请输入密码" />
					<text v-if="loginData.account.length > 0" class="w-icon-circle-close"
						@click="loginData.account = ''"></text>
				</view>
				<view class="form-item form-item-inline">
					<text class="w-icon-lock"></text>
					<input v-model="loginData.password" placeholder="请输入密码" :password="!showpwd" />
					<text v-if="showpwd && loginData.password.length > 0" class="w-icon-eye-o" @click="showpwd = !showpwd"></text>
					<text v-if="!showpwd && loginData.password.length > 0" class="w-icon-eye" @click="showpwd = !showpwd"></text>

				</view>
				<button class="submit-btn" @click="doLogin">登 录</button>
				
				<button class="" @click="toHome('admin')">管理员</button>
				<button class="" @click="toHome('sale')">销售</button>
				<button class="" @click="toHome('saleadmin')">销售管理</button>
				<button class="" @click="toHome('evaluate')">测评</button>
				<button class="" @click="toHome('evaluateadmin')">测评管理</button>
				<button class="" @click="toHome('operation')">运营管理</button>
				<button class="" @click="toHome('operationadmin')">运营管理</button>
			</form>
		</view>
	</view>
</template>

<script>
import fun from '../../common/fun'
	export default {
		data() {
			return {
				loginData: {
					account: '',
					password: '',
				},
				showpwd: false,
			}
		},
		methods: {
			doLogin() {
				fun.toPage('/pages/index/index')
			},
			
			toHome(type) {
				localStorage.setItem('token', type)
				
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		position: absolute;
		width: calc(100% - 60px);
		top: 100px;
		left: 50%;
		transform: translateX(-50%);

		.title {
			width: 100%;
			font-size: 20px;
			text-align: center;
			margin-bottom: 30px;
		}

		.login-form {
			width: 100%;

			.form-item-inline {
				display: inline-flex;
			}

			.form-item {
				border-bottom: solid 1px #ddd;
				padding: 8px 3px;
				height: 56px;
				width: 100%;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;

				input {
					height: 40px;
					width: 100%;
					line-height: 40px;
					font-size: 16px;
					padding: 0 5px;
				}

				[class^="w-icon-"],
				[class*=" w-icon-"] {
					font-size: 18px;
					margin-top: 10px;
				}
			}

			.submit-btn {
				margin-top: 50px;
				background-color: deepskyblue;
				color: #fff;
			}
		}
	}
</style>

page.json

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@uni_modules/uni-$1/uni-$1.vue"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/login/index",
			"style": {
				"navigationStyle": "custom"
			}
		}

		, {
			"path": "pages/index/index"
		}

		, {
			"path": "pages/my/index"
		}

		, {
			"path": "pages/admin/index"
		}, {
			"path": "pages/admin/custom"
		}, {
			"path": "pages/admin/department"
		}, {
			"path": "pages/admin/personnel"
		}

		, {
			"path": "pages/sale/custom"
		}

		, {
			"path": "pages/saleadmin/custom"
		}, {
			"path": "pages/saleadmin/performance"
		}, {
			"path": "pages/saleadmin/personnel"
		}

		, {
			"path": "pages/evaluate/custom"
		}

		, {
			"path": "pages/evaluateadmin/custom"
		}, {
			"path": "pages/evaluateadmin/performance"
		}, {
			"path": "pages/evaluateadmin/personnel"
		}

		, {
			"path": "pages/operation/custom"
		}

		, {
			"path": "pages/operationadmin/custom"
		}, {
			"path": "pages/operationadmin/performance"
		}, {
			"path": "pages/operationadmin/personnel"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

zsh0409
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
uni-app开发总结
2301_77865212的博客
05-22 325
原因：原生的uni-tabbar在手机端app没有完全隐藏，导致遮住了自定义的底部导航栏解决：把uni-tabbar隐藏就行了。
切换图片时有明显闪白
weixin_44850797的博客
11-26 715
需求：点击哪个哪个图片进行该图片的选择图样（一共4张图片） 我使用的是 <u-image :src="check==1?'./static/pddcheck.png':'./static/pddbtn.png'" mode="widthFix" width="220" @click="upcheck(1)"></u-image> <u-image :src="check==2?'./static/jdcheck.png':'./static/jdbtn.png'" mode
【前端】解决uniapp 微信小程序 tabbar页面切换返回后 样式闪动的问题
The_Light_Fire的博客
02-02 551
但是会出现另一个问题 就是如果wikipedia能跳转其他非tabbar页面 如果你关闭wikipedia会影响wx自带的返回功能 还需要再做处理才行。最近遇到一个需求 某tabbar页面（以下称wikipedia）有个下拉框 如果是拉起状态 那么切换到其他页面 再返回 下拉框还是处于拉起状态。然后发现从wikipedia切换到其他tabbar页面再返回wikipedia的时候 发现样式是切换前的样式 再闪烁一下后才切换。要改变状态 一开始我并没有意识到问题的严重性 想直接在onhide里改拉起状态。
uniApp自定义tabBar底部导航栏+实现tabBar中间凸起自定义样式
最新发布
weixin_52830464的博客
05-28 689
pages.js 添加 "custom": true 属性。
uniapp 开发小程序的时候使用自定义 tabbar 时出现切换页面闪烁的情况
weixin_43191327的博客
01-10 2403
问题：在使用自定义组件的时候可以看到页面切换明显的闪烁, 这种体验是很不好的, 当然最好的方式就是使用原生导航栏, 不要搞花里胡哨的东西。来看下体验不好的效果。
uni-app的tabBar用法(自动、点击刷新页面，loading加载框)
weixin_63543108的博客
08-13 6956
url: 'https://www.baidu.com', // 外部网页的URL。url: 'https://www.baidu.com', // 外部网页的URL。url: 'https://www.baidu.com', // 外部网页的URL。// 异步重新设置 src，相当于刷新 web-view。// 在页面重新显示时，刷新 web-view 组件。//给点击tabBar时加一个1s的loading加载框。//点击tabBar自动刷新页面。//点击tabBar自动刷新页面。
uni-app项目中tabbar页面加底部固定 返回页传参
zhangluludeCSDN的博客
03-19 2294
tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量–window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下 bottom: calc(var(--window-bottom) + 10px)
uniapp小程序自定义动态tabbar
04-08
小程序的TabBar是底部固定显示的导航栏，通常包含多个页面的快捷入口。微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决这一问题的关键。 3....
uniapp自定义tabbar图标样式
10-13
本话题主要关注如何在uniAPP中自定义tabbar的图标样式，这对于提升应用的用户体验和品牌一致性至关重要。 首先，我们需要了解uniAPP的tabbar组件。Tabbar是底部导航栏，通常包含多个页面标签，用户可以通过点击不同...
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
customTabBar:小程序自定义切换无闪烁的tabbar
05-10
很多时候，小程序自带的tabBar不能够满足项目需求，这个时候就需要我们自定义tabBar了。但是在网上找了很久，基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始，可以官方使用自定义tabBar了。 2、自定义...
uniapp实现自定义底部tab栏
温暖前端的博客
02-02 1666
2、在需要显示自定义底部导航的页面中，引入和使用自定义底部导航组件。表示当前选中的底部标签的索引。点击底部标签时，调用。字段，用于表示每个底部标签的图标和文本。数组，渲染每个底部标签项的图标和文本。事件，将选中的标签索引传递给父组件。1、自定义底部导航组件接收一个。数组作为参数，每个数组项包含。方法切换底部导航，并通过。
uniapp自定义tabbar
TYD0313的博客
10-15 4627
uniapp自定义封装tabbar
uniapp设置tabbar底部导航栏
qq_42376600的博客
01-17 3541
uniapp的tabBar配置
uniapp微信小程序自定义tabbar决解切换闪烁，图标闪烁
曳猫的博客
06-11 3075
uniapp自定义小程序tabbat，解决tabbat闪烁，图标闪烁
微信小程序 自定义tabbar 防止闪动
^_^
04-23 2211
微信小程序自定义导航栏tabbar 防止闪动
uniapp 电商app从0到1实战（一）——自定义tabbar组件
yehaocheng520的博客
09-21 946
电商App 最近公司的电商app一阶段终于结束了，我也终于有时间和精力去总结一下了。（之前不总结，纯粹是因为懒） 自定义tab页 看一下UI图： 明显不是Uniapp框架中的tabbar能够实现的，因此，手写一个tabbar。 自定义tabbar的思路 创建一个组件 定义一个变量tabIndex取值分别是0 1 2 ，代表 首页 收益 我的三个页面。 因为是app，小程序有存储大小的限制，app没有，为了更好的实现tab的切换，因此，将两种状态共计6张tab的图标放在本地的static文件夹中。 un
uniapp 自定义写底部导航栏
qq_30405009的博客
08-11 1135
uniapp 自定义写底部导航栏
自定义底部tabbar
07-29
您可以通过自定义底部 TabBar 来实现您想要的样式和功能。以下是一些实现方法： 1. 使用自定义组件：您可以创建一个自定义的 TabBar 组件，然后在底部放置多个 TabBarItem 组件。TabBarItem 组件可以包含图标、标题等元素，并通过点击事件来切换页面或执行其他操作。 2. 使用第三方库：许多开源的 UI 库已经提供了自定义底部 TabBar 的组件，例如 react-navigation、react-native-navigation 等。您可以根据这些库提供的文档和示例来实现您想要的样式和功能。 3. 自定义样式：如果您只需要对现有的底部 TabBar 进行一些样式上的调整，您可以通过修改底部 TabBar 的样式来实现。您可以使用自定义的样式表或直接在组件中设置样式来调整 TabBar 的背景颜色、图标样式、选中状态等。 无论您选择哪种方法，重要的是根据您的需求进行设计和实现。您可以考虑用户体验、界面一致性和易用性等因素来定制您的底部 TabBar。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zsh0409

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值