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

uniapp 自定义底部tabbar(无闪烁)_uniapp h5苹果tabbar跳动

作者：Cpp五条 | 2024-05-11 18:20:23

赞

踩

uniapp h5苹果tabbar跳动

思路：

1.创建自定义的tabbar组件

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

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

主要代码：

mytabbar.vue

  1. <template>
  2. 	<view class="uni-tabbar">
  3. 		<view class="uni-tabbar__item" v-for="(item,index) in tabList" :key="index" @tap="changeTab(item)">
  4. 			<view class="uni-tabbar__icon" :class="[tabs[item].fontIcon, item == activeTab? 'active':'']"></view>
  5. 			<view class="uni-tabbar__label" :class="{'active': item == activeTab}">
  6. 				{{tabs[item].text}}
  7. 			</view>
  8. 		</view>
  9. 	</view>
  10. </template>
  11.  
  12. <script>
  13. 	export default {
  14. 		props: {
  15. 			tabList: {
  16. 				type: Array,
  17. 				default: ['tabMyIndex']
  18. 			},
  19. 			activeTab: {
  20. 				type: String,
  21. 				default: ''
  22. 			}
  23. 		},
  24. 		emits:['update:activeTab'],
  25. 		data() {
  26. 			return {
  27. 				tabs: {
  28. 					tabAdminIndex: {
  29. 						"pagePath": "/pages/admin/index",
  30. 						"selectedIconPath": "/static/tabBar/home_col.png",
  31. 						"text": "首页",
  32. 						"fontIcon": "w-icon-home"
  33. 					},
  34. 					tabAdminCustom: {
  35. 						"pagePath": "/pages/admin/custom",
  36. 						"selectedIconPath": "/static/tabBar/home_col.png",
  37. 						"text": "客户",
  38. 						"fontIcon": "w-icon-qq"
  39. 					},
  40. 					tabAdminDepartment: {
  41. 						"pagePath": "/pages/admin/department",
  42. 						"selectedIconPath": "/static/tabBar/person_col.png",
  43. 						"text": "部门",
  44. 						"fontIcon": "w-icon-user"
  45. 					},
  46. 					tabAdminPersonnel: {
  47. 						"pagePath": "/pages/admin/personnel",
  48. 						"selectedIconPath": "/static/tabBar/person_col.png",
  49. 						"text": "员工",
  50. 						"fontIcon": "w-icon-user"
  51. 					},
  52.  
  53. 					tabSaleCustom: {
  54. 						"pagePath": "/pages/sale/custom",
  55. 						"selectedIconPath": "/static/tabBar/person_col.png",
  56. 						"text": "客户",
  57. 						"fontIcon": "w-icon-user"
  58. 					},
  59.  
  60. 					tabSaleAdminCustom: {
  61. 						"pagePath": "/pages/saleadmin/custom",
  62. 						"selectedIconPath": "/static/tabBar/person_col.png",
  63. 						"text": "客户",
  64. 						"fontIcon": "w-icon-user"
  65. 					},
  66. 					tabSaleAdminPerformance: {
  67. 						"pagePath": "/pages/saleadmin/performance",
  68. 						"selectedIconPath": "/static/tabBar/person_col.png",
  69. 						"text": "业绩",
  70. 						"fontIcon": "w-icon-user"
  71. 					},
  72. 					tabSaleadminPersonnel: {
  73. 						"pagePath": "/pages/saleadmin/personnel",
  74. 						"selectedIconPath": "/static/tabBar/person_col.png",
  75. 						"text": "员工",
  76. 						"fontIcon": "w-icon-user"
  77. 					},
  78.  
  79. 					tabEvaluateCustom: {
  80. 						"pagePath": "/pages/evaluate/custom",
  81. 						"selectedIconPath": "/static/tabBar/person_col.png",
  82. 						"text": "客户",
  83. 						"fontIcon": "w-icon-user"
  84. 					},
  85.  
  86. 					tabEvaluateadminCustom: {
  87. 						"pagePath": "/pages/evaluateadmin/custom",
  88. 						"selectedIconPath": "/static/tabBar/person_col.png",
  89. 						"text": "客户",
  90. 						"fontIcon": "w-icon-user"
  91. 					},
  92. 					tabEvaluateadminPerformance: {
  93. 						"pagePath": "/pages/evaluateadmin/performance",
  94. 						"selectedIconPath": "/static/tabBar/person_col.png",
  95. 						"text": "业绩",
  96. 						"fontIcon": "w-icon-user"
  97. 					},
  98. 					tabEvaluateadminPersonnel: {
  99. 						"pagePath": "/pages/evaluateadmin/personnel",
  100. 						"selectedIconPath": "/static/tabBar/person_col.png",
  101. 						"text": "员工",
  102. 						"fontIcon": "w-icon-user"
  103. 					},
  104.  
  105. 					tabOperationCustom: {
  106. 						"pagePath": "/pages/operation/custom",
  107. 						"selectedIconPath": "/static/tabBar/person_col.png",
  108. 						"text": "客户",
  109. 						"fontIcon": "w-icon-user"
  110. 					},
  111.  
  112. 					tabOperationadminCustom: {
  113. 						"pagePath": "/pages/operationadmin/custom",
  114. 						"selectedIconPath": "/static/tabBar/person_col.png",
  115. 						"text": "客户",
  116. 						"fontIcon": "w-icon-user"
  117. 					},
  118. 					tabOperationadminPerformance: {
  119. 						"pagePath": "/pages/operationadmin/performance",
  120. 						"selectedIconPath": "/static/tabBar/person_col.png",
  121. 						"text": "业绩",
  122. 						"fontIcon": "w-icon-user"
  123. 					},
  124. 					tabOperationadminPersonnel: {
  125. 						"pagePath": "/pages/operationadmin/personnel",
  126. 						"selectedIconPath": "/static/tabBar/person_col.png",
  127. 						"text": "员工",
  128. 						"fontIcon": "w-icon-user"
  129. 					},
  130.  
  131. 					tabMyIndex: {
  132. 						"pagePath": "/pages/my/index",
  133. 						"selectedIconPath": "/static/tabBar/person_col.png",
  134. 						"text": "我的",
  135. 						"fontIcon": "w-icon-user"
  136. 					},
  137. 				},
  138. 			};
  139. 		},
  140. 		methods: {
  141. 			changeTab(item) {
  142. 				this.$emit('update:activeTab', item)
  143. 			},
  144. 		}
  145. 	}
  146. </script>
  147.  
  148. <style lang="scss" scoped>
  149. 	[nvue] uni-scroll-view,
  150. 	[nvue] uni-swiper-item,
  151. 	[nvue] uni-view {
  152. 		flex-direction: unset;
  153. 	}
  154.  
  155. 	[nvue-dir-column] uni-swiper-item,
  156. 	[nvue-dir-column] uni-view {
  157. 		flex-direction: unset;
  158. 	}
  159.  
  160. 	.uni-tabbar {
  161. 		display: flex;
  162. 		position: fixed;
  163. 		justify-content: space-around;
  164. 		bottom: 0;
  165. 		z-index: 999;
  166. 		width: 100%;
  167. 		height: 101upx;
  168. 		padding: 10upx 0;
  169. 		box-sizing: border-box;
  170. 		-moz-box-sizing: border-box;
  171. 		border-top: solid 1upx #ccc;
  172. 		background-color: #fff;
  173. 		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
  174.  
  175. 		.uni-tabbar__item {
  176. 			display: block;
  177. 			line-height: 40upx;
  178. 			font-size: 36upx;
  179. 			text-align: center;
  180. 		}
  181.  
  182. 		.uni-tabbar__icon {
  183. 			font-size: 36upx;
  184. 			padding-bottom: 4upx;
  185.  
  186. 			&.active {
  187. 				color: #1ca6ec;
  188. 			}
  189. 		}
  190.  
  191. 		.uni-tabbar__label {
  192. 			font-size: 30upx;
  193.  
  194. 			&.active {
  195. 				color: #1ca6ec;
  196. 			}
  197. 		}
  198. 	}
  199. </style>

page/index/index/vue

  1. <template>
  2. 	<view>
  3. 		<view class="main">
  4. 			<adminIndex v-if="activeTab == 'tabAdminIndex'"></adminIndex>
  5. 			<adminCustom v-if="activeTab == 'tabAdminCustom'"></adminCustom>
  6. 			<adminDepartment v-if="activeTab == 'tabAdminDepartment'"></adminDepartment>
  7. 			<adminPersonnel v-if="activeTab == 'tabAdminPersonnel'"></adminPersonnel>
  8.  
  9. 			<saleCustom v-if="activeTab == 'tabSaleCustom'"></saleCustom>
  10.  
  11. 			<saleadminCustom v-if="activeTab == 'tabSaleAdminCustom'"></saleadminCustom>
  12. 			<saleadminPerformance v-if="activeTab == 'tabSaleAdminPerformance'"></saleadminPerformance>
  13. 			<saleadminPersonnel v-if="activeTab == 'tabSaleadminPersonnel'"></saleadminPersonnel>
  14.  
  15. 			<evaluateCustom v-if="activeTab == 'tabEvaluateCustom'"></evaluateCustom>
  16.  
  17. 			<evaluateadminCustom v-if="activeTab == 'tabEvaluateadminCustom'"></evaluateadminCustom>
  18. 			<evaluateadminPerformance v-if="activeTab == 'tabEvaluateadminPerformance'"></evaluateadminPerformance>
  19. 			<evaluateadminPersonnel v-if="activeTab == 'tabEvaluateadminPersonnel'"></evaluateadminPersonnel>
  20.  
  21. 			<operationCustom v-if="activeTab == 'tabOperationCustom'"></operationCustom>
  22.  
  23. 			<operationadminCustom v-if="activeTab == 'tabOperationadminCustom'"></operationadminCustom>
  24. 			<operationadminPerformance v-if="activeTab == 'tabOperationadminPerformance'"></operationadminPerformance>
  25. 			<operationadminPersonnel v-if="activeTab == 'tabOperationadminPersonnel'"></operationadminPersonnel>
  26.  
  27. 			<my v-if="activeTab == 'tabMyIndex'"></my>
  28. 		</view>
  29. 		<view class="footer">
  30. 			<myTabbar :tabList="tabbar" v-model:activeTab="activeTab"></myTabbar>
  31. 		</view>
  32. 	</view>
  33. </template>
  34.  
  35. <script>
  36. 	import myTabbar from '@/components/mytabbar.vue'
  37.  
  38. 	import adminIndex from '@/pages/admin/index.vue'
  39. 	import adminCustom from '@/pages/admin/custom.vue'
  40. 	import adminDepartment from '@/pages/admin/department.vue'
  41. 	import adminPersonnel from '@/pages/admin/personnel.vue'
  42.  
  43. 	import saleCustom from '@/pages/sale/custom.vue'
  44.  
  45. 	import saleadminCustom from '@/pages/saleadmin/custom.vue'
  46. 	import saleadminPerformance from '@/pages/saleadmin/performance.vue'
  47. 	import saleadminPersonnel from '@/pages/saleadmin/personnel.vue'
  48.  
  49. 	import evaluateCustom from '@/pages/evaluate/custom.vue'
  50.  
  51. 	import evaluateadminCustom from '@/pages/evaluateadmin/custom.vue'
  52. 	import evaluateadminPerformance from '@/pages/evaluateadmin/performance.vue'
  53. 	import evaluateadminPersonnel from '@/pages/evaluateadmin/personnel.vue'
  54.  
  55. 	import operationCustom from '@/pages/operation/custom.vue'
  56.  
  57. 	import operationadminCustom from '@/pages/operationadmin/custom.vue'
  58. 	import operationadminPerformance from '@/pages/operationadmin/performance.vue'
  59. 	import operationadminPersonnel from '@/pages/operationadmin/personnel.vue'
  60.  
  61. 	import my from '@/pages/my/index.vue'
  62.  
  63. 	export default {
  64. 		data() {
  65. 			return {
  66. 				tabbar: [],
  67. 				activeTab: '',
  68. 			}
  69. 		},
  70. 		methods: {},
  71. 		onLoad() {
  72. 			let _role = localStorage.getItem('token')
  73. 			
  74. 			console.log(_role)
  75. 			if (_role == null || _role == '') {
  76. 				uni.reLaunch({
  77. 					url: '/pages/login/index'
  78. 				})
  79. 			}
  80.  
  81. 			if (_role == 'admin') {
  82. 				this.tabbar = [
  83. 					'tabAdminIndex', 'tabAdminCustom', 'tabAdminDepartment', 'tabAdminPersonnel', 'tabMyIndex'
  84. 				]
  85. 				this.activeTab = 'tabAdminIndex'
  86. 			}
  87. 			if (_role == 'sale') {
  88. 				this.tabbar = [
  89. 					'tabSaleCustom', 'tabMyIndex'
  90. 				]
  91. 				this.activeTab = 'tabSaleCustom'
  92. 			}
  93. 			if (_role == 'saleadmin') {
  94. 				this.tabbar = [
  95. 					'tabSaleAdminCustom', 'tabSaleAdminPerformance', 'tabSaleadminPersonnel', 'tabMyIndex'
  96. 				]
  97. 				this.activeTab = 'tabSaleAdminCustom'
  98. 			}
  99. 			if (_role == 'evaluate') {
  100. 				this.tabbar = [
  101. 					'tabEvaluateCustom', 'tabMyIndex'
  102. 				]
  103. 				this.activeTab = 'tabEvaluateCustom'
  104. 			}
  105. 			if (_role == 'evaluateadmin') {
  106. 				this.tabbar = [
  107. 					'tabEvaluateadminCustom', 'tabEvaluateadminPerformance', 'tabEvaluateadminPersonnel',
  108. 					'tabMyIndex'
  109. 				]
  110. 				this.activeTab = 'tabEvaluateadminCustom'
  111. 			}
  112. 			if (_role == 'operation') {
  113. 				this.tabbar = [
  114. 					'tabOperationCustom', 'tabMyIndex'
  115. 				]
  116. 				this.activeTab = 'tabOperationCustom'
  117. 			}
  118. 			if (_role == 'operationadmin') {
  119. 				this.tabbar = [
  120. 					'tabOperationadminCustom', 'tabOperationadminPerformance', 'tabOperationadminPersonnel',
  121. 					'tabMyIndex'
  122. 				]
  123. 				this.activeTab = 'tabOperationadminCustom'
  124. 			}
  125. 		},
  126. 		components: {
  127. 			myTabbar,
  128. 			adminIndex,
  129. 			adminCustom,
  130. 			adminDepartment,
  131. 			adminPersonnel,
  132. 			saleCustom,
  133. 			saleadminCustom,
  134. 			saleadminPerformance,
  135. 			saleadminPersonnel,
  136. 			evaluateCustom,
  137. 			evaluateadminCustom,
  138. 			evaluateadminPerformance,
  139. 			evaluateadminPersonnel,
  140. 			operationCustom,
  141. 			operationadminCustom,
  142. 			operationadminPerformance,
  143. 			operationadminPersonnel,
  144. 			my
  145. 		}
  146. 	}
  147. </script>
  148.  
  149. <style lang="scss" scoped>
  150. 	.main {
  151. 		height: calc(100vh - 101upx);
  152. 		overflow-y: scroll;
  153. 	}
  154. 	.footer {
  155. 		height: 101upx;
  156. 	}
  157. </style>

page/login/index.vue

  1. <template>
  2. 	<view class="page">
  3. 		<view class="content">
  4. 			<view class="title">用户登录</view>
  5. 			<form class="login-form">
  6. 				<view class="form-item form-item-inline">
  7. 					<text class="w-icon-user"></text>
  8. 					<input v-model="loginData.account" placeholder="请输入密码" />
  9. 					<text v-if="loginData.account.length > 0" class="w-icon-circle-close"
  10. 						@click="loginData.account = ''"></text>
  11. 				</view>
  12. 				<view class="form-item form-item-inline">
  13. 					<text class="w-icon-lock"></text>
  14. 					<input v-model="loginData.password" placeholder="请输入密码" :password="!showpwd" />
  15. 					<text v-if="showpwd && loginData.password.length > 0" class="w-icon-eye-o" @click="showpwd = !showpwd"></text>
  16. 					<text v-if="!showpwd && loginData.password.length > 0" class="w-icon-eye" @click="showpwd = !showpwd"></text>
  17.  
  18. 				</view>
  19. 				<button class="submit-btn" @click="doLogin">登 录</button>
  20. 				
  21. 				<button class="" @click="toHome('admin')">管理员</button>
  22. 				<button class="" @click="toHome('sale')">销售</button>
  23. 				<button class="" @click="toHome('saleadmin')">销售管理</button>
  24. 				<button class="" @click="toHome('evaluate')">测评</button>
  25. 				<button class="" @click="toHome('evaluateadmin')">测评管理</button>
  26. 				<button class="" @click="toHome('operation')">运营管理</button>
  27. 				<button class="" @click="toHome('operationadmin')">运营管理</button>
  28. 			</form>
  29. 		</view>
  30. 	</view>
  31. </template>
  32.  
  33. <script>
  34. import fun from '../../common/fun'
  35. 	export default {
  36. 		data() {
  37. 			return {
  38. 				loginData: {
  39. 					account: '',
  40. 					password: '',
  41. 				},
  42. 				showpwd: false,
  43. 			}
  44. 		},
  45. 		methods: {
  46. 			doLogin() {
  47. 				fun.toPage('/pages/index/index')
  48. 			},
  49. 			
  50. 			toHome(type) {
  51. 				localStorage.setItem('token', type)
  52. 				
  53. 				uni.reLaunch({
  54. 					url: '/pages/index/index'
  55. 				})
  56. 			},
  57. 		}
  58. 	}
  59. </script>
  60.  
  61. <style lang="scss">
  62. 	.content {
  63. 		position: absolute;
  64. 		width: calc(100% - 60px);
  65. 		top: 100px;
  66. 		left: 50%;
  67. 		transform: translateX(-50%);
  68.  
  69. 		.title {
  70. 			width: 100%;
  71. 			font-size: 20px;
  72. 			text-align: center;
  73. 			margin-bottom: 30px;
  74. 		}
  75.  
  76. 		.login-form {
  77. 			width: 100%;
  78.  
  79. 			.form-item-inline {
  80. 				display: inline-flex;
  81. 			}
  82.  
  83. 			.form-item {
  84. 				border-bottom: solid 1px #ddd;
  85. 				padding: 8px 3px;
  86. 				height: 56px;
  87. 				width: 100%;
  88. 				box-sizing: border-box;
  89. 				-moz-box-sizing: border-box;
  90. 				-webkit-box-sizing: border-box;
  91.  
  92. 				input {
  93. 					height: 40px;
  94. 					width: 100%;
  95. 					line-height: 40px;
  96. 					font-size: 16px;
  97. 					padding: 0 5px;
  98. 				}
  99.  
  100. 				[class^="w-icon-"],
  101. 				[class*=" w-icon-"] {
  102. 					font-size: 18px;
  103. 					margin-top: 10px;
  104. 				}
  105. 			}
  106.  
  107. 			.submit-btn {
  108. 				margin-top: 50px;
  109. 				background-color: deepskyblue;
  110. 				color: #fff;
  111. 			}
  112. 		}
  113. 	}
  114. </style>

page.json

  1. {
  2. 	"easycom": {
  3. 		"autoscan": true,
  4. 		"custom": {
  5. 			// uni-ui 规则如下配置
  6. 			"^uni-(.*)": "@uni_modules/uni-$1/uni-$1.vue"
  7. 		}
  8. 	},
  9. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  10. 		{
  11. 			"path": "pages/login/index",
  12. 			"style": {
  13. 				"navigationStyle": "custom"
  14. 			}
  15. 		}
  16.  
  17. 		, {
  18. 			"path": "pages/index/index"
  19. 		}
  20.  
  21. 		, {
  22. 			"path": "pages/my/index"
  23. 		}
  24.  
  25. 		, {
  26. 			"path": "pages/admin/index"
  27. 		}, {
  28. 			"path": "pages/admin/custom"
  29. 		}, {
  30. 			"path": "pages/admin/department"
  31. 		}, {
  32. 			"path": "pages/admin/personnel"
  33. 		}
  34.  
  35. 		, {
  36. 			"path": "pages/sale/custom"
  37. 		}
  38.  
  39. 		, {
  40. 			"path": "pages/saleadmin/custom"
  41. 		}, {
  42. 			"path": "pages/saleadmin/performance"
  43. 		}, {
  44. 			"path": "pages/saleadmin/personnel"
  45. 		}
  46.  
  47. 		, {
  48. 			"path": "pages/evaluate/custom"
  49. 		}
  50.  
  51. 		, {
  52. 			"path": "pages/evaluateadmin/custom"
  53. 		}, {
  54. 			"path": "pages/evaluateadmin/performance"
  55. 		}, {
  56. 			"path": "pages/evaluateadmin/personnel"
  57. 		}
  58.  
  59. 		, {
  60. 			"path": "pages/operation/custom"
  61. 		}
  62.  
  63. 		, {
  64. 			"path": "pages/operationadmin/custom"
  65. 		}, {
  66. 			"path": "pages/operationadmin/performance"
  67. 		}, {
  68. 			"path": "pages/operationadmin/personnel"
  69. 		}
  70. 	],
  71. 	"globalStyle": {
  72. 		"navigationBarTextStyle": "black",
  73. 		"navigationBarTitleText": "uni-app",
  74. 		"navigationBarBackgroundColor": "#F8F8F8",
  75. 		"backgroundColor": "#F8F8F8"
  76. 	},
  77. 	"uniIdRouter": {}
  78. }

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