uni-app自定义tabbar

本是古典何须时尚 2022-12-27 01:29 206阅读 0赞

## uni-app自定义tabbar ##

为什么要自定义tabbar呢,虽然说直接在page.json里面直接配置性能可能更好点,但是有时候满足不了我们的需求,比如说,需要鉴权的时候,我们就需要通过不同的用户显示不同的底部

*  首先page.json里面  
    ![tabbar][]  
    因为做tabbar所以默认的配置项必须注释,只留下跳转的路径即可

接下来就在components 里面创建一个tabbar文件  
tabbar.vue

<template>
    	<view>
    		<view class="uni-tabbar">
    		//遍历tabbar
    			<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
    				<view class="uni-tabbar__bd">
    					<view class="uni-tabbar__icon">
    					//判断tabbar点击过后的图片路径
    						<image v-if="item.pagePath == pagePath" class="icon-img" :src="item.selectedIconPath" mode="aspectFit"></image>
    						<image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
    					</view>
    				</view>
    				//判断tabbar点击前后的样式
    				<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
    					{ { item.text}}
    				</view>
    			</view>
    		</view>
    	</view>
    </template>

<script>
    	export default { 
    		props: { 
    		//从父级继承过来的属性 需要在父级中使用:pagePath='pagePath',
    			pagePath: String
    		},
    		data() { 
    			return { 
    				// page: '',
    				showPage: false,
    				containerHeight: 400,
    				//公共的tabbar
    				tabbar: [{ 
    						"pagePath": "pages/index/index",
    						"iconPath": "/static/index.png",
    						"selectedIconPath": "/static/indexSelected.png",
    						"text": "首页"
    					},
    					{ 
    						"pagePath": "pages/order/order",
    						"iconPath": "/static/all.png",
    						"selectedIconPath": "/static/allSelected.png",
    						"text": "订单"
    					},{ 
    						"pagePath": "pages/cart/cart",
    						"iconPath": "/static/me.png",
    						"selectedIconPath": "/static/meSelected.png",
    						"text": "我的"
    					}
    				]
    			};
    		},
    		watch: { 
    			pagePath: { 
    				handler(pagePath) { 
    					console.log('pagePath监听===val', pagePath)
    				},
    				immediate: true
    			}
    		},
    		mounted() { 
    			// 根据自己的业务需求判断条件为true，替换即可,根据权限设置的tabbar 
    			//第三个参数为插入项,第一个参数为第一项位置，第二个参数为要删除几个。
    			if (true) { 
    				this.tabbar.splice(3, 0, { 
    						"pagePath": "pages/wareHouse/wareHouse",
    						"iconPath": "/static/cart.png",
    						"selectedIconPath": "/static/cartSelected.png",
    						"text": "出入库"
    					}
    				)
    			}
    		},
    		methods: { 
    			changeTab(item) { 
    				this.page = item.pagePath;
    				// 使用reLaunch关闭所有的页面，打开新的栏目页面
    				// console.log(item.pagePath)
    				// console.log(this.page)
    				uni.reLaunch({ 
    					url: '/' + this.page,
    				});
    			},
    		}
    	}
    </script>

<style lang="scss">
    	.uni-tabbar { 
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		z-index: 999;
    		width: 100%;
    		display: flex;
    		justify-content: space-around;
    		height: 100rpx;
    		padding: 16rpx 0;
    		box-sizing: border-box;
    		border-top: solid 1rpx #ccc;
    		background-color: #fff;
    		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
    
    		.uni-tabbar__item { 
    			display: block;
    			line-height: 24rpx;
    			font-size: 20rpx;
    			text-align: center;
    			width: 25%;
    		}
    
    		.uni-tabbar__icon { 
    			height: 24px;
    			line-height: 24px;
    			text-align: center;
    		}
    
    		.icon { 
    			display: inline-block;
    		}
    
    		.uni-tabbar__label { 
    			line-height: 24rpx;
    			font-size: 24rpx;
    			color: #999;
    
    			&.active { 
    				color: #C81816;
    			}
    		}
    
    		.icon-img { 
    			height: 24px;
    			width: 24px;
    		}
    	}
    </style>

[tabbar]: /images/20221120/71838e9093864d9087053654695b9495.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp使用vue3和ts开发小程序自定义tab栏，实现自定义凸出tabbar效果

![0727a2e708ee4b5a81ae186c87793caa.png][]要实现自定义的tabbar效果，可以使用自定义tab覆盖主tab来实现，当程序启动或者从后台显

红太狼/ 2024年02月19日 08:57/ 0 赞/ 93 阅读

相关猿创征文｜uniapp tabbar自定义风格，uniapp成长之路

文章目录 uniapp成长之路 1️⃣ tabBar详解 1.1 tabBar所有属性 1.2 list所有属性 2️⃣ 中间

超、凢脫俗/ 2023年09月28日 22:12/ 0 赞/ 58 阅读

相关 uni自定义tabbar

在项目中会有2个tabbar 一个在主页，一个在副页，但是uni的tabbar只能有一个，所以就基于colorUI的代码自定义一个tabbar 首先解决tabbar的样式

矫情吗；*/ 2023年05月29日 13:01/ 0 赞/ 55 阅读

相关 uni-app自定义底部tabbar

1、前言因为业务需要，使用uni-app来做小程序，但是底部icon太大了，完全不符合要求，本来看文档找到了下图的属性，以为可以改变大小，但是实验之后，查了资料，只支持

- 日理万妓/ 2023年05月22日 22:21/ 0 赞/ 32 阅读

相关自定义Tabbar

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

忘是亡心i/ 2022年12月28日 04:23/ 0 赞/ 190 阅读

相关 uni-app自定义tabbar

uni-app自定义tabbar 为什么要自定义tabbar呢,虽然说直接在page.json里面直接配置性能可能更好点,但是有时候满足不了我们的需求,比如说,需要鉴权的

本是古典何须时尚/ 2022年12月27日 01:29/ 0 赞/ 207 阅读

相关 swift - 自定义tabbar

1.自定义代码 import UIKit / 自定义tabBar / class JYCust

╰半夏微凉°/ 2022年10月03日 01:49/ 0 赞/ 231 阅读

相关自定义tabbar

iOS 自定义tabbar 具体代码参考： [https://github.com/yuchenArron/TabBar][https_github.com_yuchenA

旧城等待，/ 2022年06月01日 03:26/ 0 赞/ 238 阅读

相关 uniapp中设置TabBar

效果图： ![20210306175717503.gif][] 结构目录： ![20210306175848772.png][] pages.json:

超、凢脫俗/ 2021年07月26日 00:34/ 0 赞/ 2360 阅读

相关 uniapp 导航栏tabBar

注意: (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标 (2)当设置导航栏在顶部时,仅微信有效 (3)图标不

超、凢脫俗/ 2021年07月24日 23:15/ 0 赞/ 860 阅读