uniapp自定义tabbar底部导航栏

uniapp自定义Tabbar

效果图

• tip: 如效果图tabbar切换时感觉会小闪 ，个人在真机上测试不明显
  

定义组件

template

js

<script>
	export default {
		name: 'diy-bottom-nav',
		props: {
			value: { // tabbar
				type: Object
			},
			type: {
				type: String,
				default: ''
			},
			siteId: {
				type: [Number, String],
				default: 0
			}
		},

		data() {
			return {
				jumpFlag: true, //是否可以跳转，防止重复点击
				special: ['/member/signIn/index/index'],
                // 以下是测试数据，Demo中相关数据从接口获取，根据业务所需调整
				bottomNav: {
					bulge: true, // 是否显示悬浮按钮
					textHoverColor: '#1B1B1B', // 选中文本颜色
					textColor: '#999999', // 默认文本颜色
					backgroundColor: '#ffffff',
				},
				tabbarList: [
					{
						iconPath: "upload/xxx/home.png",
						selectedIconPath: "upload/xxx/home_selected.png",
						text: "首页",
						link: {
							type: 1,
							wap_url: "/xxx"
						},
					},
					{
						iconPath: "upload/xxx/order.png",
						selectedIconPath: "upload/xxx/order_selected.png",
						text: "订单",
						link: {
							type: 1,
							wap_url: "/xxx"
						}
					},
					{
						iconPath: "upload/xxx/user.png",
						selectedIconPath: "upload/xxx/user_selected.png",
						text: "发布",
						link: {
							type: 1,
							wap_url: "/xxx"
						}
					},
					{
						iconPath: "upload/xxx/notice.png",
						selectedIconPath: "upload/xxx/notice_selected.png",
						text: "消息",
						link: {
							type: 1,
							wap_url: "/xxx"
						}
					},
					{
						iconPath: "upload/xxx/user.png",
						selectedIconPath: "upload/xxx/user_selected.png",
						text: "我的",
						link: {
							type: 1,
							wap_url: "/xxx"
						}
					}
				],
			};
		},
		mounted() {
            // 获取当前页面路由
			let currentPage = getCurrentPages()[getCurrentPages().length - 1];
			this.currentRoute = currentPage.route;
            
            // 如需通过接口获取tabbar数据
            // this.getBottomNav();
		},
		computed: {
			isBulge() {
				// 判断悬浮按钮
				if (this.tabbarList) {
					return this.tabbarList.length == 5 && this.special.indexOf(this.currentRoute) == -1 && this.bottomNav.bulge;
				} else {
					return false;
				}
			}
		},
		methods: {
            /**
			 * @param {Object} link
			 * 处理页面跳转相关逻辑
			 */
			redirectTo(link) {
				this.$emit('callback');
				if (!this.jumpFlag) return;
				this.jumpFlag = false;
				setTimeout(() => {
					this.jumpFlag = true;
				}, 300);
				if (link == null || link == '' || !link.wap_url) return false;
				if (link.wap_url.indexOf(this.currentRoute) != -1) return false;

				let jump = true;
				let arr = getCurrentPages().reverse();
				for (let i = 0; i < arr.length; i++) {
					if (link.wap_url.indexOf(arr[i].route) != -1) {
						jump = false;
						uni.navigateBack({
							delta: i
						});
						break;
					}
				}
                
				// 根据个人所需设置跳转方式
				if (jump) {
					uni.navigateTo({
						url: link.wap_url
					})
				}
			},
            /**
			 * @param {Object} link
			 * 校验url
			 */
			verify(link) {
				if (link == null || link == '' || !link.wap_url) return false;
				if (link.wap_url.indexOf(this.currentRoute) != -1) {
					return true;
				}
				return false;
			},
                
			/**
			 * 请求接口获取tabbar信息
			 * test 根据个人所需调整
			 */
			getBottomNav() {
				let url = '/api/view/bottomNav';
				let data = {};
				if (this.siteId) {
					url = '/api/view/shopBottomNav';
					data.site_id = this.siteId;
				}
			
				this.$api.sendRequest({
					url: url,
					data: data,
					success: res => {
						let data = res.data;
						if (data && data.value && data.value.length) {
							let value = JSON.parse(data.value);
							this.bottomNav = value;
							this.tabbarList = value.list;
							this.$store.commit('setTabbarList', JSON.parse(data.value));
							this.$forceUpdate();
						}
					}
				});
			}
		}
	};
</script>

tabbar接口返回数据效果图

• 字段根据需求调整

css

使用组件

• 这里简单使用，把获取tabbar接口放在子组件，判断是否存在siteId请求对应接口。

<template>
	<view>
    	<bottom-nav></bottom-nav>
        
        <!-- or -->
        
        <bottom-nav :siteId="siteId"></bottom-nav>
    </view>
</template>


<script>
	import bottomNav from '@/components/bottom-nav/index.vue'
    
	export default {
		components: {
			bottomNav
		},
    }
</script>