我自己写的自定义的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}"