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

uniapp里面tabbar自定义的方法_uniapp 自定义tabbar

作者：你好赵伟 | 2024-04-18 11:33:21

赞

踩

uniapp 自定义tabbar

第一种不封装自定义tabbar，需要的页面tabbar

需要的步骤

第一步，pages.json需要

  1. "tabBar": {
  2. 		"custom": true,//自定义
  3. 		"color": "#666666",
  4. 		"selectedColor": "#DF5458",
  5. 		"list": [{
  6. 				"pagePath": "pages/index1"
  7. 			},
  8. 			{
  9. 				"pagePath": "pages/index2"
  10. 			},
  11. 			{
  12. 				"pagePath": "pages/index3"
  13. 			},
  14. 			{
  15. 				"pagePath": "pages/index4"
  16. 			}
  17. 		]
  18. 	},

第二步对应的页面

  1. <u-tabbar class="tabbar" :value="value1" @change="change1" :fixed="true" activeColor="red" inactiveColor="#000" :placeholder="false" :safeAreaInsetBottom="false">
  2. 			<u-tabbar-item text="首页">
  3. 				<image class="u-page__item__slot-icon" slot="active-icon"
  4. 					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  5. 				<image class="u-page__item__slot-icon" slot="inactive-icon"
  6. 					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  7. 			</u-tabbar-item>
  8. 			<u-tabbar-item text="放映厅">
  9. 				<image class="u-page__item__slot-icon" slot="active-icon"
  10. 					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  11. 				<image class="u-page__item__slot-icon" slot="inactive-icon"
  12. 					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  13. 			</u-tabbar-item>
  14. 			<u-tabbar-item text="直播">
  15. 				<image class="u-page__item__slot-icon" slot="active-icon"
  16. 					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  17. 				<image class="u-page__item__slot-icon" slot="inactive-icon"
  18. 					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  19. 			</u-tabbar-item>
  20. 			<u-tabbar-item text="我的">
  21. 				<image class="u-page__item__slot-icon" slot="active-icon"
  22. 					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  23. 				<image class="u-page__item__slot-icon" slot="inactive-icon"
  24. 					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  25. 			</u-tabbar-item>
  26. 		</u-tabbar>

第二种封装的tabbar

引入组件，注册组件，给组件传当前页面数

组件

  1. <template>
  2. 	<u-tabbar class="tabbar" :value="val" @change="change1" :fixed="true" :border='true' activeColor="red" inactiveColor="#000"
  3. 		:placeholder="false" :safeAreaInsetBottom="false">
  4. 		<u-tabbar-item text="首页">
  5. 			<image class="u-page__item__slot-icon" slot="active-icon"
  6. 				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  7. 			<image class="u-page__item__slot-icon" slot="inactive-icon"
  8. 				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  9. 		</u-tabbar-item>
  10. 		<u-tabbar-item text="放映厅">
  11. 			<image class="u-page__item__slot-icon" slot="active-icon"
  12. 				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  13. 			<image class="u-page__item__slot-icon" slot="inactive-icon"
  14. 				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  15. 		</u-tabbar-item>
  16. 		<u-tabbar-item text="直播">
  17. 			<image class="u-page__item__slot-icon" slot="active-icon"
  18. 				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  19. 			<image class="u-page__item__slot-icon" slot="inactive-icon"
  20. 				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  21. 		</u-tabbar-item>
  22. 		<u-tabbar-item text="我的">
  23. 			<image class="u-page__item__slot-icon" slot="active-icon"
  24. 				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
  25. 			<image class="u-page__item__slot-icon" slot="inactive-icon"
  26. 				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
  27. 		</u-tabbar-item>
  28. 	</u-tabbar>
  29. </template>
  30.  
  31. <script>
  32. 	export default {
  33. 		props: {
  34. 			val: {
  35. 				type: Number,
  36. 				default: 0
  37. 			}
  38. 		},
  39. 		data() {
  40. 			return {
  41. 				list: [{
  42. 						path: "pages/index1"
  43. 					},
  44. 					{
  45. 						path: "pages/index2"
  46. 					},
  47. 					{
  48. 						path: "pages/index3"
  49. 					},
  50. 					{
  51. 						path: 'pages/index4'
  52. 					},
  53. 				]
  54. 			};
  55. 		},
  56. 		methods: {
  57. 			change1(e) {
  58. 				uni.switchTab({
  59. 					url: '/' + this.list[e].path,
  60. 				})
  61. 			},
  62. 		}
  63. 	}
  64. </script>
  65.  
  66. <style lang="scss">
  67.  
  68. </style>

就这两种

或

  1. <template>
  2. 	<view>
  3. 		<view :style="'height: '+height+'px;'"></view>
  4. 		<u-tabbar v-model="val" @change="tabbarChange" :fixed="true" :placeholder="false" :border='false'
  5. 			activeColor="#d81e06" inactiveColor="#666666" :safeAreaInsetBottom="false">
  6. 			<view class="tab">
  7. 				<u-tabbar-item text="商城">
  8. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem1.png"></image>
  9. 					<image class="icon" slot="active-icon" src="@/static/image/farem5.png"></image>
  10. 				</u-tabbar-item>
  11. 				<u-tabbar-item text="分类">
  12. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem2.png"></image>
  13. 					<image class="icon" slot="active-icon" src="@/static/image/farem6.png"></image>
  14. 				</u-tabbar-item>
  15. 				<u-tabbar-item>
  16. 					<image slot="inactive-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
  17. 					<image slot="active-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
  18. 				</u-tabbar-item>
  19. 				<u-tabbar-item text="购物车">
  20. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem3.png"></image>
  21. 					<image class="icon" slot="active-icon" src="@/static/image/farem8.png"></image>
  22. 				</u-tabbar-item>
  23. 				<u-tabbar-item text="我的">
  24. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem4.png"></image>
  25. 					<image class="icon" slot="active-icon" src="@/static/image/farem7.png"></image>
  26. 				</u-tabbar-item>
  27. 			</view>
  28. 		</u-tabbar>
  29. 	</view>
  30.  
  31.  
  32. </template>
  33. <script>
  34. 	export default {
  35. 		props: {
  36. 			val: {
  37. 				type: Number,
  38. 				default: 0
  39. 			}
  40. 		},
  41. 		// options: {
  42. 		// 	styleIsolation: 'shared'
  43. 		// },
  44. 		created() {
  45. 			const info = uni.getSystemInfoSync()
  46. 			const scale = 750 / info.windowWidth;
  47. 			this.height = 156 / scale
  48. 		},
  49. 		data() {
  50. 			return {
  51. 				height: '',
  52. 				value4: 0,
  53. 				list: [{
  54. 						path: "pages/index1"
  55. 					},
  56. 					{
  57. 						path: "pages/classify/classify"
  58. 					},
  59. 					{
  60. 						path: "pages/shop/index"
  61. 					},
  62. 					{
  63. 						path: "pages/shopping/shopping"
  64. 					},
  65. 					{
  66. 						path: 'pages/index/index'
  67. 					},
  68. 				]
  69. 			}
  70. 		},
  71. 		// props: {
  72. 		// 	current: Number,
  73. 		// },
  74. 		onLoad() {},
  75. 		onShow() {
  76.  
  77. 		},
  78. 		methods: {
  79. 			tabbarChange(e) {
  80. 				if (e == 2) {
  81. 					uni.scanCode({
  82. 						scanType: ["qrCode"],
  83. 						success(e) {
  84. 							uni.reLaunch({
  85. 								url: "/packageA/pages/index?q=" + encodeURIComponent(e.result)
  86. 							})
  87. 						}
  88. 					})
  89. 				} else {
  90. 					uni.switchTab({
  91. 						url: '/' + this.list[e].path,
  92. 					})
  93. 				}
  94. 			}
  95. 		}
  96. 	}
  97. </script>
  98. <style lang="scss">
  99. 	.icon {
  100. 		width: 50rpx;
  101. 		height: 50rpx;
  102. 	}
  103.  
  104. 	.icon2 {
  105. 		width: 156rpx;
  106. 		height: 156rpx;
  107. 	}
  108.  
  109. 	.tab {
  110. 		height: 156rpx;
  111. 		background-image: url(@/static/image/farem55.png);
  112. 		background-repeat: no-repeat;
  113. 		background-size: 750rpx;
  114. 		background-position: top center;
  115. 		display: flex;
  116. 		width: 100%;
  117. 	}
  118. 	::v-deep.u-tabbar-item__text {
  119. 		font-size: 10px !important;
  120. 	}
  121. </style>
  1. <template>
  2. 	<view>
  3. 		<view :style="'height: '+height+'px;'"></view>
  4. 		<u-tabbar v-model="val" @change="tabbarChange" :fixed="true" :placeholder="false" :border='false'
  5. 			activeColor="#d81e06" inactiveColor="#666666" :safeAreaInsetBottom="false">
  6. 			<view class="tab">
  7. 				<u-tabbar-item text="商城">
  8. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem1.png"></image>
  9. 					<image class="icon" slot="active-icon" src="@/static/image/farem5.png"></image>
  10. 				</u-tabbar-item>
  11. 				<u-tabbar-item text="分类">
  12. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem2.png"></image>
  13. 					<image class="icon" slot="active-icon" src="@/static/image/farem6.png"></image>
  14. 				</u-tabbar-item>
  15. 				<u-tabbar-item>
  16. 					<image slot="inactive-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
  17. 					<image slot="active-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
  18. 				</u-tabbar-item>
  19. 				<u-tabbar-item text="购物车">
  20. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem3.png"></image>
  21. 					<image class="icon" slot="active-icon" src="@/static/image/farem8.png"></image>
  22. 				</u-tabbar-item>
  23. 				<u-tabbar-item text="我的">
  24. 					<image class="icon" slot="inactive-icon" src="@/static/image/farem4.png"></image>
  25. 					<image class="icon" slot="active-icon" src="@/static/image/farem7.png"></image>
  26. 				</u-tabbar-item>
  27. 			</view>
  28. 		</u-tabbar>
  29. 	</view>
  30.  
  31.  
  32. </template>
  33. <script>
  34. 	export default {
  35. 		props: {
  36. 			val: {
  37. 				type: Number,
  38. 				default: 0
  39. 			}
  40. 		},
  41. 		created() {
  42. 			const info = uni.getSystemInfoSync()
  43. 			const scale = 750 / info.windowWidth;
  44. 			this.height = 156 / scale
  45. 		},
  46. 		data() {
  47. 			return {
  48. 				height: '',
  49. 				value4: 0,
  50. 				list: [{
  51. 						path: "pages/index1"
  52. 					},
  53. 					{
  54. 						path: "pages/classify/classify"
  55. 					},
  56. 					{
  57. 						path: "pages/shop/index"
  58. 					},
  59. 					{
  60. 						path: "pages/shopping/shopping"
  61. 					},
  62. 					{
  63. 						path: 'pages/index/index'
  64. 					},
  65. 				]
  66. 			}
  67. 		},
  68. 		onLoad() {},
  69. 		onShow() {
  70.  
  71. 		},
  72. 		methods: {
  73. 			tabbarChange(e) {
  74. 				if (e == 2) {
  75. 					uni.scanCode({
  76. 						scanType: ["qrCode"],
  77. 						success(e) {
  78. 							uni.reLaunch({
  79. 								url: "/packageA/pages/index?q=" + encodeURIComponent(e.result)
  80. 							})
  81. 						}
  82. 					})
  83. 				} else {
  84. 					uni.switchTab({
  85. 						url: '/' + this.list[e].path,
  86. 					})
  87. 				}
  88. 			}
  89. 		}
  90. 	}
  91. </script>
  92. <style lang="scss">
  93. 	.icon {
  94. 		width: 50rpx;
  95. 		height: 50rpx;
  96. 	}
  97.  
  98. 	.icon2 {
  99. 		width: 156rpx;
  100. 		height: 156rpx;
  101. 	}
  102.  
  103. 	.tab {
  104. 		height: 156rpx;
  105. 		background-image: url(@/static/image/farem55.png);
  106. 		background-repeat: no-repeat;
  107. 		background-size: 750rpx;
  108. 		background-position: top center;
  109. 		display: flex;
  110. 		width: 100%;
  111. 	}
  112. 	::v-deep.u-tabbar-item__text {
  113. 		font-size: 10px !important;
  114. 	}
  115. </style>

引入组件的页面样式加入

要不然不透

还有就是tabbar不定高度，就按照自己高度定

如果定了高度就按照

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

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

  

闽ICP备14008679号