uniapp小程序自定义底部导航栏中间凸起样式

我自己写的自定义的tabbar效果图自定义tabbar效果图
废话少说咱们直接上代码,一步一步来

第一步:

找到根目录下的 pages.json 文件,在 tabBar 中把 custom 设置为 true,默认值是 false。list 中设置自定义的相关信息,

pagePath: 页面路径;
iconPath: 点击前显示的图片;
selectedIconPath: 点击后显示的图片;
text: 底部导航的名称。
在这里插入图片描述

第二步

在根目录下创建 components 文件夹用来存放自定义tabBar组件,小伙伴们可以自定义文件夹和文件的名称。记得命名要规范哦!!!
在这里插入图片描述

第三步

咱也不截图了,看了那么多的文章全他妈截图,咱直接上代码方便有需要的小伙伴使用!!!!

<template>
	<view class="tabbar-container flex items-center">
		<!-- isRound是中间凸出样式的标志,用来判断当前子级是否是凸出样式的 -->
		<view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)">
			<!-- 不是凸出的子级 -->
			<template v-if="!item.isRound">
				<view class="item-top flex justify-center flex-col">
					<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
						:height="item.height"></u-image>
				</view>
				<view class="item-bottom" :class="{'active': active === index}">
					<text>{
   
   {
   
    item.text }}</text>
				</view>
			</template>
			<!-- 凸出的子级 -->
			<template v-else>
				<view class="flex flex-col justify-center items-center center-round">
					<view class="flex flex-col justify-center items-center">
						<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
							:height="item.height"></u-image>
						<text :class="{'round-active': active === index}"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值