uni-app自定义底部tabbar

- 日理万妓 2023-05-22 22:21 7阅读 0赞

### 1、前言 ###

因为业务需要，使用uni-app来做小程序，但是底部icon太大了，完全不符合要求，本来看文档找到了下图的属性，以为可以改变大小，但是实验之后，查了资料，只支持App，小程序完全不起作用，所以只有自定义吧，然后又在插件市场找插件，才发现这市场是什么玩意，插件市场的东西太烂了，很多bug，然后我不光要修改自己的bug，还有改插件市场的bug，所以以后能不用uni-app就不用，没错，我就是那种一边用着人家的东西一边骂垃圾的人。然后各种百度，没找到符合要求，只给图片，不给源码，气的我要死，自己写！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]

### 2、coding ###

1）先放一张效果图，如下可以看到已经可以控制icon的宽高了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
2）注释pages.json tabbar代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]  
3）编写tabbar组件

<template>
    	<view class="tarbar">
    		<view class=".tarbar-list" :style="{ 
    	                background: tabBar.backgroundColor,
    	                color: tabBar.color,
    	                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
    	                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
    	            }">
    			<view class="tarbar-list-ul">
    				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
    					<block>
    						<view class="tarbar-list-li-icon">
    							<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
    						</view>
    						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">{ {  item.text }}</view>
    					</block>
    				</view>
    			</view>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				tabBar: { 
    					color: '#999999',
    					selectedColor: '#FE7F00',
    					borderStyle: 'white',
    					backgroundColor: '#fff',
    					position: 'bottom',
    					list: [{ 
    							"pagePath": "/pages/index/index",
    							"iconPath": "/static/image/vienna/home_inactive.png",
    							"selectedIconPath": "/static/image/home_active.png",
    							"text": "首页"
    						},
    						{ 
    							"pagePath": "/pages/seach/index",
    							"iconPath": "/static/image/vienna/classify_inactive.png",
    							"selectedIconPath": "/static/image/classify_active.png",
    							"text": "搜索"
    						},
    						{ 
    							"pagePath": "/pages/car/index",
    							"iconPath": "/static/image/vienna/cart_inactive.png",
    							"selectedIconPath": "/static/image/cart_active.png",
    							"text": "购物车"
    						},
    						{ 
    							"pagePath": "/pages/my/index",
    							"iconPath": "/static/image/vienna/user_inactive.png",
    							"selectedIconPath": "/static/image/user_active.png",
    							"text": "我的"
    						}
    					]
    				},
    				selected: this.current //当前激活项
    			};
    		},
    		props: { 
    			current: {  
    				type: [Number, String],
    				default: 0
    			}
    		},
    		methods: { 
    			setSelected(index) { 
    				if (this.selected == index) return
    				// this.selected = index
    				this.$emit('change', index)
    			},
    		},
    		watch: { 
    			current: { 
    				handler(val) {  // 
    					this.selected = val
    					const _this = this
    					uni.setNavigationBarTitle({  // 设置顶部bar的标题
    						title: _this.tabBar.list[val].text
    					})
    				},
    				immediate: true
    			}
    		}
    	}
    </script>
    
    <style>
    	.tarbar { 
    		width: 100%;
    		z-index: 9999;
    		position: fixed;
    	}
    
    	.tarbar-list { 
    		width: 100%;
    		height: 98upx;
    		background: #4d586f;
    		position: fixed;
    		left: 0;
    		bottom: 0;
    	}
    
    	.tarbar-list-ul { 
    		width: 100%;
    		height: 100%;
    		padding: 0upx 60upx;
    		display: flex;
    		justify-content: space-between;
    		box-sizing: border-box;
    	}
    
    	.tarbar-list-li { 
    		width: 80upx;
    		height: 100%;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    
    	}
    
    	.tarbar-list-li-icon { 
    		width: 50upx;
    		height: 50upx;
    		margin: 0 auto;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    
    	}
    
    	.tarbar-list-li-icon image { 
    		width: 36rpx;
    		height: 36rpx;
    	}
    
    	.tarbar-list-li-name { 
    		width: 100%;
    		text-align: center;
    		line-height: 30upx;
    		font-size: 24upx;
    		height: 30upx;
    	}
    
    	.tarbar-list-li-center { 
    		width: 100upx;
    	}
    </style>

然后把你几个页面当成组件再加上一个tab-bar组件构建  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]  
4）**最重点的部分来的**  
完成了上面的只是一部分，重点是在onShow中写如下代码，首先我在App.vue设置全局变量，如下图所示，所以只要进入onShow 就会根据toHome.flag来判断是否要切换tabbar，然后通过改变this.current来改变tabbar，这样就可以实现tabbar的切换了

onShow(param) { 
    			let toHome = getApp().globalData.toHome
    			if (toHome.flag) { 
    				this.current = toHome.current
    				getApp().globalData.toHome.flag = false
    			}
    			this.notifyShow = this.notifyShow + 1
    		},

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]

那么我从其他页面怎么跳到首页的相应页呢，比如我从商品详情页要跳到购物车页面，就可以使用下面代码,就可以跳转到购物车页面了

getApp().globalData.toHome.flag = true
    getApp().globalData.toHome.current = 2 // 因为购物车索引为2 
    	uni.reLaunch({   // 关闭所有页跳转
    	        url: `/pages/home/home`
    	})

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 5]

### 3、notifyShow1（onShow不执行） ###

你肯定会好奇这个notifyShow1的属性代表什么意思，如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 6]  
那是因为你使用我上面的方法自定义tabbar之后，你会发现index search car my组件的onShow没用的，失灵了，所以我就在这四个组件监听了notifyShow1，看完下面的图你就清晰了，我每次进入home.vue(就是四个组件加tabbar的那个页面 不清楚的从上面的图找),home.vue执行onShow一次，this.notifyShow自加1，然后各页面就可以监听到改变，然后你就可以在各个页面的watch下执行你本来想在页面执行的步骤，解决自定义tabbar onShow失效的bug，这只是我做的时候的一种解决方法，因为任务也比较急，先使用这个吧，大佬们有好的办法，请在评论处告之，不胜感激！有疑惑，评论处见，源码是不可能给的，公司的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230521/85207fd7d39344ca80d7acf402324110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20230521/f31ff5e81f3648ffbe9f3c2b01ac4143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: /images/20230521/64c1025c6800423dbf63e0a0337d50b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]: /images/20230521/b08c0eca7e3e48f48e301aa575442924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]: /images/20230521/9b0178bbd13c42d68ecc7519d3c02ec5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 5]: /images/20230521/2618354db93c46389388cb6477c6cf8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 6]: /images/20230521/f977cb4aed044257be42b1ac07c0a632.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 7]: /images/20230521/baeb910da3f44ff0bbfba4c7377e1653.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 8]: /images/20230521/3ba65d08cd384e688d3ba9ff9a7de495.png